TabTopAutoTextSizeLayout【自定義文字字號區域（動態選項卡數據且可滑動）】
阿新 • • 發佈：2018-07-07
標題 unit near cnblogs 重新 auto target 類文件 fault 
版權聲明：本文為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的左右邊距值需要在代碼中設置
//設置內邊距【第一個不設置左邊距，最後一個不設置右邊距】
可滑動效果是在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; } }TabTopAutoTextSizeLayout.java
將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>tab_top_auto_textsize_item.xml
在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);//帶單位 } }); } }
混淆配置
無
參考資料
暫時空缺
項目demo下載地址
https://github.com/haiyuKing/TabTopAutoTextSizeLayout
TabTopAutoTextSizeLayout【自定義文字字號區域（動態選項卡數據且可滑動）】