TabTopAutoTextSizeLayout【自定义文字字号区域（动态选项卡数据且可滑动）】
版权声明：本文为HaiyuKing原创文章，转载请注明出处！
前言
自定义顶部选项卡布局LinearLayout类，实现可滑动效果。【实际情况中建议使用RecyclerView】
对《TabTopAutoLayout【自定义顶部选项卡区域（带下划线）（动态选项卡数据且可滑动）】》的实际运用。
效果图
代码分析
简TabTopAutoTextSizeLayout：选项卡布局类——自定义的LinearLayout子类；实现了各个选项卡的布局、状态切换、点击事件的回调。
需要注意：注释掉params.weight = 1;
//设置要添加的子布局view的参数 LinearLayout.LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); // params.weight = 1;//在tab_item文件的根节点RelativeLayout中是无法添加的，而这个是必须要写上的，否则只会展现一个view params.gravity = Gravity.CENTER;
item的左右边距值需要在代码中设置
//设置内边距【第一个不设置左边距，最后一个不设置右边距】
int paddingPx = mContext.getResources().getDimensionPixelOffset(R.dimen.tab_top_auto_padding);
if(index == 0){
params.setMargins(0,0,paddingPx,0);
}else if(index == tabTitleList.size() - 1){
params.setMargins(paddingPx,0,0,0);
}else{
params.setMargins(paddingPx,0,paddingPx,0);
}
可滑动效果是在activity_main布局文件中实现的
<HorizontalScrollView android:id="@+id/tab_hori_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="none" android:layout_margin="20dp"> <com.why.project.tabtopautotextsizelayout.tab.TabTopAutoTextSizeLayout android:id="@+id/tab_textsizeLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="horizontal" /> </HorizontalScrollView>
使用步骤
一、项目组织结构图
注意事项：
1、导入类文件后需要change包名以及重新import R文件路径
2、Values目录下的文件（strings.xml、dimens.xml、colors.xml等），如果项目中存在，则复制里面的内容，不要整个覆盖
二、导入步骤
将TabTopAutoTextSizeLayout.java文件复制到项目中
package com.why.project.tabtopautotextsizelayout.tab; import android.content.Context; import android.graphics.Typeface; import android.util.AttributeSet; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.widget.LinearLayout; import android.widget.RelativeLayout; import android.widget.TextView; import com.why.project.tabtopautotextsizelayout.R; import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * Created by HaiyuKing * Used TabTopAutoLayout的变形运用：文字字号横向列表 */ public class TabTopAutoTextSizeLayout extends LinearLayout { private Context mContext; //选项卡标题 //CharSequence与String都能用于定义字符串，但CharSequence的值是可读可写序列，而String的值是只读序列。 private CharSequence[] toptab_Titles = {"16"}; //选项卡的各个选项的标题的集合：用于切换时改变文字颜色 private List<TextView> topTab_titles = new ArrayList<TextView>(); public TabTopAutoTextSizeLayout(Context context, AttributeSet attrs) { super(context, attrs); mContext = context; List<CharSequence> toptab_titleList = new ArrayList<CharSequence>(); toptab_titleList = Arrays.asList(toptab_Titles); //初始化view：创建多个view对象（引用tab_bottom_item文件），设置图片和文字，然后添加到这个自定义类的布局中 initAddBottomTabItemView(toptab_titleList); } //初始化控件 private void initAddBottomTabItemView(List<CharSequence> tabTitleList){ int countChild = this.getChildCount(); if(countChild > 0){ this.removeAllViewsInLayout();//清空控件 //将各个选项卡的各个选项的标题添加到集合中 topTab_titles.clear(); } for(int index=0;index<tabTitleList.size();index++){ //设置要添加的子布局view的参数 LinearLayout.LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); // params.weight = 1;//在tab_item文件的根节点RelativeLayout中是无法添加的，而这个是必须要写上的，否则只会展现一个view params.gravity = Gravity.CENTER; final int finalIndex = index; //============引用选项卡的各个选项的布局文件================= View toptabitemView = LayoutInflater.from(mContext).inflate(R.layout.tab_top_auto_textsize_item, this, false); //===========选项卡的根布局========== RelativeLayout toptabLayout = (RelativeLayout) toptabitemView.findViewById(R.id.toptabLayout); //===========设置选项卡的文字========== final TextView top_title = (TextView) toptabitemView.findViewById(R.id.top_title); //设置选项卡的文字 top_title.setText(tabTitleList.get(index)); //===========设置选项卡控件的Tag(索引)==========用于后续的切换更改图片和文字 top_title.setTag("tag"+index); //设置内边距【第一个不设置左边距，最后一个不设置右边距】 int paddingPx = mContext.getResources().getDimensionPixelOffset(R.dimen.tab_top_auto_padding); if(index == 0){ params.setMargins(0,0,paddingPx,0); }else if(index == tabTitleList.size() - 1){ params.setMargins(paddingPx,0,0,0); }else{ params.setMargins(paddingPx,0,paddingPx,0); } //添加选项卡各个选项的触发事件监听 toptabLayout.setOnClickListener(new OnClickListener() { public void onClick(View v) { //设置当前选项卡状态为选中状态 //修改View的背景颜色 setTabsDisplay(finalIndex); //添加点击事件 if(textSizeItemSelectListener != null){ //执行activity主类中的onBottomTabSelected方法 textSizeItemSelectListener.onTextSizeItemSelected(finalIndex); } } }); //把这个view添加到自定义的布局里面 this.addView(toptabitemView,params); //将各个选项卡的各个选项的标题添加到集合中 topTab_titles.add(top_title); } } /** * 设置底部导航中图片显示状态和字体颜色 */ public void setTabsDisplay(int checkedIndex) { int size = topTab_titles.size(); for(int i=0;i<size;i++){ TextView topTabTitle = topTab_titles.get(i); //设置选项卡状态为选中状态 if(topTabTitle.getTag().equals("tag"+checkedIndex)){ topTabTitle.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD)); //修改文字颜色 topTabTitle.setTextColor(getResources().getColor(R.color.tab_text_selected_color)); }else{ topTabTitle.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL)); //修改文字颜色 topTabTitle.setTextColor(getResources().getColor(R.color.tab_text_normal_color)); } } } public TextView getTabsItem(int checkedIndex){ TextView topTabTitle = topTab_titles.get(checkedIndex); return topTabTitle; } /**设置显示的选项卡集合*/ public void setTabList(ArrayList<CharSequence> toptab_titleList){ initAddBottomTabItemView(toptab_titleList); } private OnTextSizeItemSelectListener textSizeItemSelectListener; //自定义一个内部接口，用于监听选项卡选中的事件,用于获取选中的选项卡的下标值 public interface OnTextSizeItemSelectListener{ void onTextSizeItemSelected(int index); } public void setOnTopTabSelectedListener(OnTextSizeItemSelectListener textSizeItemSelectListener){ this.textSizeItemSelectListener = textSizeItemSelectListener; } }
将tab_top_auto_textsize_item.xml文件复制到项目中
<?xml version="1.0" encoding="utf-8"?> <!-- --> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/toptabLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" > <!-- 标题 --> <TextView android:id="@+id/top_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="" android:textSize="16sp" android:textColor="@color/tab_text_normal_color" android:layout_centerInParent="true" android:paddingLeft="5dp" android:paddingRight="5dp"/> </RelativeLayout>
在colors.xml文件中添加以下代码：【后续可根据实际情况更改文字颜色值】
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <!-- *********************************选项卡（文字字号横向列表）区域********************************* --> <!-- 选项卡文本颜色 --> <color name="tab_text_normal_color">#ff777777</color> <color name="tab_text_selected_color">#1A78EC</color> </resources>
在dimens.xml文件中添加以下代码：【后续可根据实际情况更改底部选项卡区域的边距值】
<resources> <!-- *********************************选项卡（文字字号横向列表）区域********************************* --> <!-- 选项卡的内边距 --> <dimen name="tab_top_auto_padding">10dp</dimen> </resources>
至此，TabTopAutoTextSizeLayout类集成到项目中了。
三、使用方法
在Activity布局文件中引用TabTopAutoTextSizeLayout布局类【注意：需要重新引用TabTopAutoTextSizeLayout类的完整路径】
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <Button android:id="@+id/btn_change" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="选中字号24" android:layout_margin="20dp" android:layout_gravity="center"/> <HorizontalScrollView android:id="@+id/tab_hori_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="none" android:layout_margin="20dp"> <com.why.project.tabtopautotextsizelayout.tab.TabTopAutoTextSizeLayout android:id="@+id/tab_textsizeLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="horizontal" /> </HorizontalScrollView> <TextView android:id="@+id/text_size_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="这显示选中的字号" android:textColor="@color/tab_text_selected_color" android:layout_margin="20dp" android:layout_gravity="center"/> </LinearLayout>
在Activity中使用如下
package com.why.project.tabtopautotextsizelayout; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Button; import android.widget.TextView; import com.why.project.tabtopautotextsizelayout.tab.TabTopAutoTextSizeLayout; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { private Button mChangeBtn; private TextView mSelectedTextSizeTV;//选中的文字大小的展现view private static String[] fontSizes = {"10","12","14","16","18","20","22","24","26","30","36","42"}; private String fontSizeUnit = "px"; private TabTopAutoTextSizeLayout mTextSizeLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initViews(); initDatas(); initEvents(); } private void initViews() { mChangeBtn = (Button) findViewById(R.id.btn_change); mSelectedTextSizeTV = (TextView) findViewById(R.id.text_size_view); mTextSizeLayout = (TabTopAutoTextSizeLayout) findViewById(R.id.tab_textsizeLayout); } private void initDatas() { ArrayList<CharSequence> textSizeArray = new ArrayList<CharSequence>();//用于展现 for(int i=0;i<fontSizes.length;i++){ textSizeArray.add(fontSizes[i]); } mTextSizeLayout.setTabList(textSizeArray); } private void initEvents() { //模拟更改字体 mChangeBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { int selectedTextSize = 24; mSelectedTextSizeTV.setText(selectedTextSize + fontSizeUnit); int selectedIndex = 0; for(int i = 0;i<fontSizes.length;i++){ if(Integer.parseInt(fontSizes[i]) == selectedTextSize){ selectedIndex = i; break; } } mTextSizeLayout.setTabsDisplay(selectedIndex); } }); //字号的点击事件 mTextSizeLayout.setOnTopTabSelectedListener(new TabTopAutoTextSizeLayout.OnTextSizeItemSelectListener() { @Override public void onTextSizeItemSelected(int index) { mSelectedTextSizeTV.setText(fontSizes[index] + fontSizeUnit);//带单位 } }); } }
混淆配置
无
参考资料
暂时空缺
