自定义TabView
package dss.com.tabviewcontainer.view; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Color; import android.util.AttributeSet; import android.util.TypedValue; import android.view.Gravity; import android.view.View; import android.widget.FrameLayout; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.RelativeLayout; import android.widget.TextView; import java.util.ArrayList; import java.util.List; import dss.com.tabviewcontainer.R; public class TabView extends RelativeLayout { private static final int RMP = LayoutParams.MATCH_PARENT; private static final int RWC = LayoutParams.WRAP_CONTENT; private static final int LWC = LinearLayout.LayoutParams.WRAP_CONTENT; private static final int LMP = LinearLayout.LayoutParams.MATCH_PARENT; /** * the TextView selected color,default is orange */ private int mTextViewSelColor; /** * the ChildView unselected color,default is black */ private int mChildViewUnSelColor; /** * the ChildView selected color,default is orange */ private int mChildViewSelColor; /** * the TextView unselected color,default is black */ private int mTextViewUnSelColor; /** * the TabView background color,default is white */ private int mTabViewBackgroundColor; /** * the TabView`s height,default is 52dip */ private int mTabViewHeight; /** * Spacing between the icon and textview,default is 2dip */ private int mImageViewTextViewMargin; /** * the textview`s size,default is 14sp */ private int mTextViewSize; /** * the imageview`s width,default width is 30dip */ private int mImageViewWidth; /** * the imageview`s height,default height is 30dip */ private int mImageViewHeight; /** * the child inside tabview */ private List<TabViewChild> mTabViewChildList; /** * the tabview`s location,default is bottom */ private int mTabViewGravity=Gravity.BOTTOM; /** * which tabchild to show,default is 0 */ private int mTabViewDefaultPosition=0; private LinearLayout tabview; private List<Integer> unselectedIconList; private FrameLayout mFragmentContainer; private int index = 0; private int currentTabIndex; public TabView(Context context, AttributeSet attrs) { this(context,attrs,0); } public TabView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initDefaultAttrs(context); initCustomAttrs(context, attrs); initView(context); } //初始化颜色 private void initDefaultAttrs(Context context){ mTextViewSelColor= Color.rgb(252,88,17); mTextViewUnSelColor= Color.rgb(129,130,149); mChildViewSelColor = Color.rgb(255,255,255); mChildViewUnSelColor = Color.rgb(255,255,255); mTabViewBackgroundColor= Color.rgb(255,255,255); mTabViewHeight= dp2px(context,52); mImageViewTextViewMargin= dp2px(context,2); mTextViewSize= sp2px(context,14); mImageViewWidth= dp2px(context,30); mImageViewHeight= dp2px(context,30); } private void initCustomAttrs(Context context, AttributeSet attrs) { TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TabView); final int N = typedArray.getIndexCount(); for (int i = 0; i < N; i++) { initCustomAttr(typedArray.getIndex(i), typedArray); } typedArray.recycle(); } private void initCustomAttr(int attr, TypedArray typedArray) { if (attr == R.styleable.TabView_tab_textViewSelColor) { mTextViewSelColor = typedArray.getColor(attr, mTextViewSelColor); } else if (attr == R.styleable.TabView_tab_textViewUnSelColor) { mTextViewUnSelColor = typedArray.getColor(attr,mTextViewUnSelColor); } else if (attr == R.styleable.TabView_tab_tabViewBackgroundColor) { mTabViewBackgroundColor = typedArray.getColor(attr, mTabViewBackgroundColor); } else if (attr == R.styleable.TabView_tab_tabViewHeight) { mTabViewHeight = typedArray.getDimensionPixelSize(attr, mTabViewHeight); } else if (attr == R.styleable.TabView_imageViewTextViewMargin) { mImageViewTextViewMargin = typedArray.getDimensionPixelSize(attr, mImageViewTextViewMargin); } else if (attr == R.styleable.TabView_tab_textViewSize) { mTextViewSize = typedArray.getDimensionPixelSize(attr, mTextViewSize); } else if (attr == R.styleable.TabView_tab_imageViewWidth) { mImageViewWidth = typedArray.getDimensionPixelSize(attr, mImageViewWidth); } else if (attr == R.styleable.TabView_tab_imageViewHeight) { mImageViewHeight = typedArray.getDimensionPixelSize(attr, mImageViewHeight); } else if (attr == R.styleable.TabView_tab_tabViewGravity) { mTabViewGravity = typedArray.getInt(attr, mTabViewGravity); } else if (attr == R.styleable.TabView_tab_tabViewDefaultPosition) { mTabViewDefaultPosition = typedArray.getInteger(attr, mTabViewDefaultPosition); } } private void initView(Context context){ tabview=new LinearLayout(context); tabview.setId(R.id.tabview_id); mFragmentContainer=new FrameLayout(context); mFragmentContainer.setId(R.id.tabview_fragment_container); LayoutParams fragmentContainerParams=new LayoutParams(RMP,RMP); LayoutParams tabviewParams=null; if(mTabViewGravity==Gravity.BOTTOM){ tabviewParams=new LayoutParams(RMP,mTabViewHeight); tabview.setOrientation(LinearLayout.HORIZONTAL); tabviewParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM); fragmentContainerParams.addRule(RelativeLayout.ABOVE,R.id.tabview_id); }else if(mTabViewGravity==Gravity.LEFT){ tabviewParams=new LayoutParams(mTabViewHeight,RMP); tabview.setOrientation(LinearLayout.VERTICAL); tabviewParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT); fragmentContainerParams.addRule(RelativeLayout.RIGHT_OF,R.id.tabview_id); }else if(mTabViewGravity==Gravity.TOP){ tabviewParams=new LayoutParams(RMP,mTabViewHeight); tabview.setOrientation(LinearLayout.HORIZONTAL); tabviewParams.addRule(RelativeLayout.ALIGN_PARENT_TOP); fragmentContainerParams.addRule(RelativeLayout.BELOW,R.id.tabview_id); }else if(mTabViewGravity==Gravity.RIGHT){ tabviewParams=new LayoutParams(mTabViewHeight,RMP); tabview.setOrientation(LinearLayout.VERTICAL); tabviewParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT); fragmentContainerParams.addRule(RelativeLayout.LEFT_OF,R.id.tabview_id); } tabview.setLayoutParams(tabviewParams); tabview.setBackgroundColor(mTabViewBackgroundColor); mFragmentContainer.setLayoutParams(fragmentContainerParams); this.addView(tabview); this.addView(mFragmentContainer); } private void initTabChildView(){ tabview.removeAllViews(); unselectedIconList=new ArrayList<>(); for(int i=0;i<mTabViewChildList.size();i++){ final TabViewChild t=mTabViewChildList.get(i); final LinearLayout tabChild=new LinearLayout(getContext()); tabChild.setGravity(Gravity.CENTER); tabChild.setOrientation(LinearLayout.VERTICAL); tabChild.setBackgroundColor(mChildViewUnSelColor); LinearLayout.LayoutParams tabChildParams=null; if(mTabViewGravity==Gravity.BOTTOM){ tabChildParams=new LinearLayout.LayoutParams(0,LMP,1.0f); tabChildParams.gravity= Gravity.CENTER_HORIZONTAL; }else if(mTabViewGravity==Gravity.LEFT){ tabChildParams=new LinearLayout.LayoutParams(LMP,0,1.0f); tabChildParams.gravity= Gravity.CENTER_VERTICAL; }else if(mTabViewGravity==Gravity.TOP){ tabChildParams=new LinearLayout.LayoutParams(0,LMP,1.0f); tabChildParams.gravity= Gravity.CENTER_HORIZONTAL; }else if(mTabViewGravity==Gravity.RIGHT){ tabChildParams=new LinearLayout.LayoutParams(LMP,0,1.0f); tabChildParams.gravity= Gravity.CENTER_VERTICAL; } tabChild.setLayoutParams(tabChildParams); final ImageView imageview=new ImageView(getContext()); LinearLayout.LayoutParams ivParams=new LinearLayout.LayoutParams( mImageViewWidth, mImageViewHeight ); ivParams.gravity=Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL; imageview.setLayoutParams(ivParams); imageview.setImageResource(t.getImageViewUnSelIcon()); unselectedIconList.add(t.getImageViewUnSelIcon()); tabChild.addView(imageview); final TextView textview=new TextView(getContext()); textview.setText(t.getTextViewText()); textview.setTextColor(mTextViewUnSelColor); textview.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTextViewSize); LinearLayout.LayoutParams textviewParams=new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT ); textviewParams.gravity=Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL; textviewParams.topMargin=mImageViewTextViewMargin; textview.setLayoutParams(textviewParams); tabChild.addView(textview); tabview.addView(tabChild); final int currentPosition=i; if(mTabViewDefaultPosition>=mTabViewChildList.size()){ if(i==0){ imageview.setImageResource(t.getImageViewSelIcon()); textview.setText(t.getTextViewText()); textview.setTextColor(mTextViewSelColor); tabChild.setBackgroundColor(mChildViewSelColor); } }else{ if(mTabViewDefaultPosition==i){ imageview.setImageResource(t.getImageViewSelIcon()); textview.setText(t.getTextViewText()); textview.setTextColor(mTextViewSelColor); tabChild.setBackgroundColor(mChildViewSelColor); } } tabChild.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { reSetAll(); imageview.setImageResource(t.getImageViewSelIcon()); textview.setText(t.getTextViewText()); // textview.setTextColor(mTextViewSelColor); textview.setTextColor(Color.argb(255,255,0,0)); tabChild.setBackgroundColor(mChildViewSelColor); index = currentPosition; showOrHide(); if(listener!=null){ listener.onTabChildClick(currentPosition,imageview,textview); } } }); } } /**设置选中项 * @param position */ public void setSelectedPosition(int position) { this.mTabViewDefaultPosition=position; this.index=position; this.currentTabIndex=position; reSetAll(); final TabViewChild t=mTabViewChildList.get(position); LinearLayout layout = (LinearLayout) tabview.getChildAt(position); layout.setBackgroundColor(mChildViewSelColor); ImageView imageView = (ImageView) layout.getChildAt(0); TextView textView = (TextView) layout.getChildAt(1); imageView.setImageResource(t.getImageViewSelIcon()); textView.setText(t.getTextViewText()); textView.setTextColor(mTextViewSelColor); } public void setTabViewChild(List<TabViewChild> tabViewChildList){ this.mTabViewChildList=tabViewChildList; if(mTabViewDefaultPosition>=tabViewChildList.size()){ index=0; currentTabIndex=0; mTabViewDefaultPosition=0; } initTabChildView(); } public void setTabViewDefaultPosition(int position){ this.mTabViewDefaultPosition=position; this.index=position; this.currentTabIndex=position; } private void reSetAll(){ for(int i=0;i<tabview.getChildCount();i++){ LinearLayout tabChild= (LinearLayout) tabview.getChildAt(i); tabChild.setBackgroundColor(mChildViewUnSelColor); for(int j=0;j<tabChild.getChildCount();j++){ ImageView iv= (ImageView) tabChild.getChildAt(0); TextView tv= (TextView) tabChild.getChildAt(1); iv.setImageResource(unselectedIconList.get(i)); tv.setTextColor(mTextViewUnSelColor); } } } private OnTabChildClickListener listener=null; public void setOnTabChildClickListener(OnTabChildClickListener l){ listener=l; } public interface OnTabChildClickListener{ void onTabChildClick(int position, ImageView imageView, TextView textView); } private void showOrHide() { currentTabIndex = index; } public void setTextViewSelectedColor(int color){ this.mTextViewSelColor=color; } public void setTextViewUnSelectedColor(int color){ this.mTextViewUnSelColor=color; } public void setChildViewUnSelColor(int color) { this.mChildViewUnSelColor = color; } public void setChildViewSelColor(int color) { this.mChildViewSelColor = color; } public void setTabViewBackgroundColor(int color){ this.mTabViewBackgroundColor=color; tabview.setBackgroundColor(color); } /** * * @param height px */ public void setTabViewHeight(int height){ this.mTabViewHeight=height; } /** * * @param margin px */ public void setImageViewTextViewMargin(int margin){ this.mImageViewTextViewMargin=margin; } public void setTextViewSize(int size){ this.mTextViewSize= sp2px(getContext(),size); } public void setImageViewWidth(int width){ this.mImageViewWidth=width; } public void setImageViewHeight(int height){ this.mImageViewHeight=height; } public void setTabViewGravity(int gravity){ this.mTabViewGravity=gravity; } public int dp2px(Context context, float dpValue) { return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, context.getResources().getDisplayMetrics()); } public int sp2px(Context context, float spValue) { return (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_SP, spValue, context.getResources().getDisplayMetrics()); } }
布局子View
package dss.com.tabviewcontainer.view; public class TabViewChild { private int imageViewSelIcon; private int imageViewUnSelIcon; private String textViewText; private TabViewChild(){ } public TabViewChild(int imageViewSelIcon,int imageViewUnSelIcon,String textViewText) { this.imageViewSelIcon = imageViewSelIcon; this.imageViewUnSelIcon=imageViewUnSelIcon; this.textViewText = textViewText; } public int getImageViewSelIcon() { return imageViewSelIcon; } public void setImageViewSelIcon(int imageViewSelIcon) { this.imageViewSelIcon = imageViewSelIcon; } public int getImageViewUnSelIcon() { return imageViewUnSelIcon; } public void setImageViewUnSelIcon(int imageViewUnSelIcon) { this.imageViewUnSelIcon = imageViewUnSelIcon; } public String getTextViewText() { return textViewText; } public void setTextViewText(String textViewText) { this.textViewText = textViewText; } }
配置Value文件
<?xml version="1.0" encoding="utf-8"?> <resources> <!--TabView--> <declare-styleable name="TabView"> <attr name="tab_textViewSelColor" format="reference|color" /> <attr name="tab_textViewUnSelColor" format="reference|color" /> <attr name="tab_tabViewBackgroundColor" format="reference|color" /> <attr name="tab_tabViewHeight" format="dimension" /> <attr name="imageViewTextViewMargin" format="dimension" /> <attr name="tab_textViewSize" format="dimension" /> <attr name="tab_imageViewWidth" format="dimension" /> <attr name="tab_imageViewHeight" format="dimension" /> <attr name="tab_tabViewGravity"> <flag name="top" value="0x30" /> <flag name="bottom" value="0x50" /> <flag name="left" value="0x03" /> <flag name="right" value="0x05" /> </attr> <attr name="tab_tabViewDefaultPosition" format="integer" /> </declare-styleable> <item name="tabview_id" type="id" /> <item name="tabview_fragment_container" type="id" /> </resources>
搞定:
MainActivity布局文件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="dss.com.tabviewcontainer.MainActivity"> <FrameLayout android:id="@+id/layout_container" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" /> <dss.com.tabviewcontainer.view.TabView android:id="@+id/mall_tabview" android:layout_width="match_parent" android:layout_height="50dp" app:tab_tabViewGravity="bottom"/> </LinearLayout>
MainActivty的主要代码
package dss.com.tabviewcontainer; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.widget.ImageView; import android.widget.TextView; import java.util.ArrayList; import dss.com.tabviewcontainer.view.TabView; import dss.com.tabviewcontainer.view.TabViewChild; public class MainActivity extends AppCompatActivity implements TabView.OnTabChildClickListener { private TabView mTabView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mTabView = (TabView) findViewById(R.id.mall_tabview); initData(); } private void initData() { ArrayList<TabViewChild> tabviewChilds = new ArrayList<>(); tabviewChilds.add(0,new TabViewChild(R.drawable.tab01_sel,R.drawable.tab01_unsel,"页")); tabviewChilds.add(1,new TabViewChild(R.drawable.tab03_sel,R.drawable.tab03_unsel,"分类")); tabviewChilds.add(2,new TabViewChild(R.drawable.tab04_sel,R.drawable.tab04_unsel,"购物车")); tabviewChilds.add(3,new TabViewChild(R.drawable.tab05_sel,R.drawable.tab05_unsel,"我的")); mTabView.setTabViewChild(tabviewChilds); mTabView.setOnTabChildClickListener(this); } @Override public void onTabChildClick(int position, ImageView imageView, TextView textView) { System.out.println("position = [" + position + "], imageView = [" + imageView + "], textView = [" + textView + "]"); } }
就实现了商城的底部导航