版权声明:本文为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;
}
}

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【自定义文字字号区域(动态选项卡数据且可滑动)】的更多相关文章

  1. TabTopAutoLayout【自定义顶部选项卡区域(带下划线)(动态选项卡数据且可滑动)】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线且可滑动效果.[实际情况中建议使用RecyclerView] 备注:如果 ...

  2. html页面自定义文字水印效果案例

    在系统开发过程中,一些数据或页面比较敏感的地方,客户会要求实现水印效果,防止内部人员截图或拍照泄露信息. 自定义文字水印顾名思义就是利用js在完成页面渲染的同时,往页面的最底层动态生成多个带水印信息的 ...

  3. PHP---微信JS-SDK获取access_token/jsapi_ticket/signature权限签名算法,php/thinkphp实现微信分享自定义文字和图片

    PHP---微信JS-SDK获取access_token/jsapi_ticket/signature权限签名算法, php/thinkphp实现微信分享自定义文字和图片. 一.先看微信JS-SDK文 ...

  4. 关于devexpress报表XtraReport,动态修改报表样式(.repx格式),动态添加数据并使用的理解

    一.基本概念: XtraReports 中的每个报表都由 XtraRepot 类的一个实例表示,或者由该类的子类来表示(这种情况更常见). 因此,每个报表都作为带区的容器使用,而每个带区中都包含报表控 ...

  5. React使用jquery方式动态获取数据

    好久没写react了,今天有空写一下来react实现实时请求数据,并刷新数据的小demo. 首先我还是选择了jquery方式中自带的ajax获取数据,首先要引用所需的js包 接下来要写一个自定义的js ...

  6. 第27讲 UI组件之 ScrollView与底部动态添加数据

    第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...

  7. JVM 内存区域 (运行时数据区域)

    JVM 内存区域 (运行时数据区域) 链接:https://www.jianshu.com/p/ec479baf4d06 运行时数据区域 Java 虚拟机在执行 Java 程序的过程中会把它所管理的内 ...

  8. [JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件

    本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...

  9. WPF 自定义的图表(适用大量数据绘制)下

    原文:WPF 自定义的图表(适用大量数据绘制)下 上一篇文章中讲了WPF中自定义绘制大量数据的图标,思路是先将其绘制在内存,然后一次性加载到界面,在后续的调试过程中,发现当数据量到达10W时,移动鼠标 ...

随机推荐

  1. Asp.Net Core NLog 将日志输出到数据库以及添加LayoutRenderer的支持

    在这之前打算用Apache的Log4Net,但是发现其AdoNetAppender方法已经不存在了,无法使用配置文件直接输出到数据库了,因此我便改用了NLog框架. 一.对项目添加NLog 通过Nug ...

  2. HTTP/HTTPS 学习笔记

    超文本传输协议(HyperText Transfer Protocol) 伴随着计算机网络和浏览器的诞生,HTTP1.0也随之而来,处于计算机网络中的应用层,HTTP是建立在TCP协议之上的. HTT ...

  3. BZOJ_4197_[Noi2015]寿司晚宴_状态压缩动态规划

    BZOJ_4197_[Noi2015]寿司晚宴_状态压缩动态规划 Description 为了庆祝 NOI 的成功开幕,主办方为大家准备了一场寿司晚宴.小 G 和小 W 作为参加 NOI 的选手,也被 ...

  4. 猴子 JDFZ模拟赛

    猴子(弱) Description 话说NP做梦,梦见自己变成了一只猴子,并且有很多香蕉树,这些香蕉树都种在同一直线上,而NP则在这排香蕉树的第一棵树上.NP当然想吃尽量多的香蕉,但它又不想在地上走, ...

  5. tomcat设置直接通过域名访问项目(不需要接 /项目名)

    本文转自 : https://blog.csdn.net/qq_33647275/article/details/52585489 效果图 打开 tomcat - ->conf- ->se ...

  6. AMBA总线协议AHB、APB

    一.什么是AMBA总线 AMBA总线规范是ARM公司提出的总线规范,被大多数SoC设计采用,它规定了AHB (Advanced High-performance Bus).ASB (Advanced ...

  7. APP界面设计与页面布局的23条基本原则

    一个App的好与不好,很大部分取决于移动App页面布局的合理性,优秀的布局顾名思义就是对页面的文字.图形或表格等进行排版.设计. 优秀的布局,需要对页面信息进行完整的考虑,既要考虑用户需求.用户行为, ...

  8. MYSQL—— 启动MYSQL 57 报错“The service MYSQL57 failed the most recent........等”的问题解决方式!

    每天开机之后,启动MYSQL Notifier就报错,第一次出现重启电脑后解决,后面的几天老是出现,重启电脑好几次都没有解决,感觉很烦人,一定要搞定这个问题找到原因,于是有了下文....... 启动M ...

  9. 死磕 java集合之DelayQueue源码分析

    问题 (1)DelayQueue是阻塞队列吗? (2)DelayQueue的实现方式? (3)DelayQueue主要用于什么场景? 简介 DelayQueue是java并发包下的延时阻塞队列,常用于 ...

  10. 从壹开始 [ Id4 ] 之一║ 授权服务器 IdentityServer4 开篇讲&计划书

    前言 哈喽大家周四好!时间过的很快,现在已经是三月份了,我的 IdentityServer4 教程也拖了一定的时间了,正好最近有精力学新东西了,主要中间被小伙伴要求写一个管理后台,目前1.0已经上线( ...