TabLayout+TagFlowLayout 实现类似饿了么对
1、功能实现所需jar
implementation'com.hyman:flowlayout-lib:1.1.2'
implementation'com.android.support:design:27.1.1'
核心代码类
public class EvaluationWidgetViewextends LinearLayout {
private ContextmContext;
private TagFlowLayoutmTagFlowLayout;
private EditTextmTagInputEt;
private TabLayoutmTabLayout;
private int tabIndexDefault=1;
private ListmList;
private HashMap>selectList=new HashMap<>();
private boolean tagInputState=false;
public EvaluationWidgetView(Context context) {
super(context);
mContext = context;
initView();
}
public EvaluationWidgetView(Context context,@Nullable AttributeSet attrs) {
super(context, attrs);
mContext = context;
initView();
}
public EvaluationWidgetView(Context context,@Nullable AttributeSet attrs,int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext = context;
initView();
}
private void initView() {
LayoutInflater mLayoutInflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = mLayoutInflater.inflate(R.layout.evaluation_widget_view_layout,this,false);
addView(view);
mTabLayout = view.findViewById(R.id.tab_layout);
mTabLayout.setTabMode(TabLayout.MODE_FIXED);
mTabLayout.setSelectedTabIndicatorHeight(0);
ViewCompat.setElevation(mTabLayout,10);
mTagFlowLayout = view.findViewById(R.id.tag_flow_layout);
mTagInputEt = view.findViewById(R.id.tag_input_et);
mTagFlowLayout.setOnSelectListener(new TagFlowLayout.OnSelectListener() {
@Override
public void onSelected(Set selectPosSet) {
int pos=mTagFlowLayout.getAdapter().getCount()-1;
boolean b=selectPosSet.contains(pos);
selectList.put(tabIndexDefault,selectPosSet);
if(b){
tagInputState=true;
}else {
tagInputState=false;
}
setTagInput();
}
});
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// setTagViewVisibleGone(tab.getPosition());
TextView textView=tab.getCustomView().findViewById(R.id.tab_e_tv);
textView.setTextColor(mContext.getResources().getColor(R.color.dark_orange));
tabIndexDefault=tab.getPosition();
setData();
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
TextView textView=tab.getCustomView().findViewById(R.id.tab_e_tv);
textView.setTextColor(mContext.getResources().getColor(R.color.color_999999));
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
private void setTagInput(){
mTagInputEt.setVisibility(tagInputState?View.VISIBLE:View.GONE);
}
public void setViewData(List datas){
if(datas!=null&&datas.size()>0){
// Gson gson=new Gson();
// Log.d("dlh", "---------------->"+gson.toJson(datas));
mList=datas;
}else {
mList=new ArrayList<>();
}
initTagFlow();
}
private void setData(){
if(tabIndexDefault>=0&&tabIndexDefault
setTagFlowData(mTagFlowLayout,mList.get(tabIndexDefault).getList());
}
}
private void initTagFlow(){
if(tabIndexDefault>=0&&tabIndexDefault
mTabLayout.addTab(mTabLayout.newTab().setCustomView(getTabTopIconBottomTextView(R.drawable.tab_make_complaints, R.string.tab_make_complaints)),false);
mTabLayout.addTab(mTabLayout.newTab().setCustomView(getTabTopIconBottomTextView(R.drawable.tab_satisfied, R.string.tab_satisfied)),true);
mTabLayout.addTab(mTabLayout.newTab().setCustomView(getTabTopIconBottomTextView(R.drawable.tab_great_praise, R.string.tab_great_praise)),false);
selectList.put(tabIndexDefault,new HashSet());
setTagFlowData(mTagFlowLayout,mList.get(tabIndexDefault).getList());
}
}
private void setTagFlowData(TagFlowLayout tag,List strings){
TagAdapter tagAdapter =new TagAdapter(strings) {
@Override
public View getView(FlowLayout parent,int position, String o) {
LayoutInflater layoutInflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
TextView tv = (TextView) layoutInflater.inflate(R.layout.tv,
parent,false);
tv.setText(o);
return tv;
}
@Override
public void onSelected(int position, View view) {
super.onSelected(position, view);
}
@Override
public void unSelected(int position, View view) {
super.unSelected(position, view);
}
};
if(selectList.get(tabIndexDefault)!=null&&selectList.get(tabIndexDefault).size()>0){
tagAdapter.setSelectedList(selectList.get(tabIndexDefault));
}else if(tagInputState){
tagAdapter.setSelectedList(tagAdapter.getCount()-1);
}
tag.setAdapter(tagAdapter);
}
public EvaluationGroupBean getSelectData(){
EvaluationGroupBean m=new EvaluationGroupBean();
Set integerSet=mTagFlowLayout.getSelectedList();
EvaluationGroupBean temp=mList.get(tabIndexDefault);
List selectItemStrings=new ArrayList<>();
Iterator it = integerSet.iterator();
while (it.hasNext()) {
String item= temp.getList().get(it.next());
selectItemStrings.add(item);
}
if(tagInputState){
selectItemStrings.remove(selectItemStrings.size()-1);
}
m.setGroupTitle(temp.getGroupTitle());
m.setList(selectItemStrings);
return m;
}
public String getTagInputText(){
String inputString=null;
if(tagInputState){
inputString =mTagInputEt.getText().toString();
}
return inputString;
}
private View getTabTopIconBottomTextView(int resIcon,int resText){
LayoutInflater layoutInflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View itemView = layoutInflater.inflate(R.layout.tab_top_icon_bottom_text_view_layout,null);
ImageView imageView=itemView.findViewById(R.id.tab_e_iv);
imageView.setImageResource(resIcon);
TextView textView=itemView.findViewById(R.id.tab_e_tv);
textView.setText(resText);
return itemView;
}
所有需要布局文件
R.layout.evaluation_widget_view_layout
android:layout_width="match_parent"
xmlns:zhy="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="@drawable/base_rectangle_white_shape"
android:paddingTop="12dp"
android:paddingBottom="24dp"
android:paddingRight="12dp"
android:paddingLeft="12dp"
android:layout_height="wrap_content">
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_marginBottom="16dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:minHeight="64dp"
app:tabSelectedTextColor="@color/orange"
app:tabTextColor="@color/color_999999"
android:layout_height="wrap_content"/>
android:id="@+id/tag_flow_layout"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content"
zhy:max_select="-1"
/>
android:id="@+id/tag_input_et"
android:layout_width="match_parent"
android:layout_marginTop="20dp"
android:minHeight="100dp"
android:hint="@string/str_rate_hint_text"
android:layout_gravity="left"
android:gravity="left"
android:visibility="gone"
android:padding="10dp"
android:textSize="@dimen/textSize16"
android:background="@drawable/base_rectangle_white_shape"
android:layout_height="wrap_content"/>
R.layout.tab_top_icon_bottom_text_view_layout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_gravity="center"
android:orientation="vertical">
android:id="@+id/tab_e_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab_great_praise"/>
android:id="@+id/tab_e_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="@dimen/textSize12"
android:text="@string/tab_great_praise"
android:textColor="@drawable/base_tag_tv_text_color"/>
R.layout.tv
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_margin="2dp"
android:paddingTop="2dp"
android:paddingBottom="2dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:background="@drawable/see_item_tag_bg_selector"
android:text="Helloworld"
android:textColor="@drawable/base_tag_tv_text_color">
UI效果图：
