Skip to content

Commit

Permalink
2.0版本
Browse files Browse the repository at this point in the history 
1. 处理非 Viewpager 时，选中不更换颜色
2. 增加 TextConfig 用于配置 TextView 的一些属性
  • Loading branch information
@Zzhengsr
Zzhengsr committed Mar 1, 2022
1 parent 599e7b0 commit 4c50770
Show file tree
Hide file tree
Showing 12 changed files with 227 additions and 175 deletions.
2 changes: 1 addition & 1 deletion .idea/misc.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ implementation 'com.github.LillteZheng:FlowHelper:v1.37'


## 版本信息：
- v2.0 : 内置部分控件，减少接入成本，并优化一些bug，和关闭demo ，viewpager 内存泄露的问题
- v1.37 : 增加 tab_width_equals_text ，让 rect 根据 text 的长度变化，修复 TabColorTextView 加粗不起作用的问题
- v1.32 : 修复res和round，tab_margin_x 不起作用的问题
- v1.30 : 重构分离了ViewPager和非ViewPager的情况，并处理数据增加减少时，notifyDataChange()导致布局混乱的问题
Expand Down
124 changes: 63 additions & 61 deletions TAB_README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,56 +80,61 @@ tab_type 可以填 tri ，rect，round 等类型

**Java**

那么，在 xml 写好了，接着，就是在 Activity 中，这样写：
TabFlowLayout 支持TextView 和 TabColorTextView 两种，可以通知 TabConfig 配置，简易版本如下：
```
private void rectFlow(){
private void configFlow(){
TabFlowLayout flowLayout = findViewById(R.id.rectflow);
//设置数据，这里以 setAdapter 的形式
flowLayout.setAdapter(new TabFlowAdapter<String>(R.layout.item_msg,mTitle) {
@Override
public void onItemSelectState(View view, boolean isSelected) {
super.onItemSelectState(view, isSelected);
//选中时，可以改变不同颜色，如果你的background 为 selector，可以不写这个
if (isSelected){
setTextColor(view,R.id.item_text,Color.WHITE);
}else{
setTextColor(view,R.id.item_text,getResources().getColor(R.color.unselect));
}
}
@Override
public void bindView(View view, String data, int position) {
/**
* 绑定数据，可以使用 setText(..) 等快捷方式，也可以视同 view.findViewById()
* 同时，当你的子控件需要点击事件时，可以通过 addChildrenClick() 注册事件，
* 然后重写 onItemChildClick(..) 即可拿到事件，否则就自己写。
* 自己的点击和长按不需要注册
*/
setText(view,R.id.item_text,data)
.setTextColor(view,R.id.item_text,getResources().getColor(R.color.unselect));
if (position == 0){
setVisible(view,R.id.item_msg,true);
}
// 注册子控件的点击事件
//addChildrenClick(view,R.id.item_text,position);
//注册子控件的长按事件
//addChildrenLongClick(view,R.id.item_text,position);
}
});
//1. 默认是 TextView 模式，只需要配置 title 的数据即可，不需要其他操作，当然这个 List 是 String 类型的
TabConfig config = new TabConfig.Builder()
.setViewpager(mViewPager)
.setSelectedColor(Color.WHITE)
.setUnSelectColor(getResources().getColor(R.color.unselect))
.build();
flowLayout.setAdapter(config, new TabFlowAdapter<>(mTitle));
//2. 也可以配置成颜色渐变模式，比如你还想设置TextView的大小，粗细等，如下：
TextConfig textConfig = new TextConfig()
.setPadding(l, t, l, t)
.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD))
.setTextSize(18);
TabConfig config = new TabConfig.Builder()
.setViewpager(mViewPager)
.setDefaultTextType(FlowConstants.COLORTEXT)
.setTextConfig(textConfig)
.setSelectedColor(getResources().getColor(R.color.colorAccent))
.setUnSelectColor(getResources().getColor(R.color.unselect))
.build();
flowLayout.setAdapter(config, new TabFlowAdapter<>(mTitle));
//3. 如果你觉得默认的不满足你的需求，setAdapter 也支持传入自定义的 layout ，如：
TabConfig config = new TabConfig.Builder()
.setViewPager(mViewPager)
.setTextId(R.id.item_text)
.setDefaultPos(2)
.setVisibleCount(4)
.build();
flowLayout.setAdapter(config,adapter = new TabFlowAdapter<String>(R.layout.item_tab,datas) {
@Override
public void bindView(View view, NavData data, int position) {
setText(view,R.id.item.text,data.getTitle();
}
});
}
```
可以看到，只需要设置 adapter 就行了，需要注意的是你要传入子控件的 layout，这样方便你自定义你的布局，比如一个TextView 和一个红点点。
可以看到，只需要设置 adapter 就行了，也可以传入 layout，这样方便你自定义你的布局，比如一个TextView 和一个红点点。

**如果需要数据更新，使用adapter.notifyDataChanged() 即可**

具体细节，可以参看这个：

[实现一个可定制化的TabFlowLayout(三) -- 动态数据添加与常用接口封装](https://blog.csdn.net/u011418943/article/details/103817967)

如果你需要使用颜色渐变的效果，蒋xml 的TextView 换成 TabColorTextView 就可以了，比如：
如果你需要使用颜色渐变的效果，直接看上面的第二种配置，如果不满足，也可以自定义 xml ，比如：
```
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
Expand Down Expand Up @@ -184,20 +189,25 @@ flowLayout.setViewPager(viewpager) .
如果您想要配置默认位置，或者 TextView 的颜色变化，则需要配置TabConfig :
```
/**
* @ setViewPager 设置 viewpager
* @ setTextId view 中 textview 的id,用于TextView的颜色变化
* @ setDefaultPosition 默认选中的item，初始值为0，也可以从第二页或者其他 位置
* @ setSelectedColor //选中的颜色，如果为 TabColorTextView 不需要些这个
* @ setUnSelectedColor //没有选中的颜色，如果为 TabColorTextView 不需要些这个
* @ setViewPager // 设置 viewpager
* @ setTextId // 可选，如果配置了layout，需要设置 view 中 textview 的id,用于TextView的颜色变化，未配置layout可忽略
* @ setDefaultPosition // 默认选中的item，初始值为0，也可以从第二页或者其他 位置
* @ setSelectedColor // 选中的颜色，如果为 TabColorTextView 不需要些这个
* @ setUnSelectedColor // 没有选中的颜色，如果为 TabColorTextView 不需要些这个
* @ setDefaultTextType // 默认TextView，可配置成 TabColorTextView
* @ setTextConfig // 对默认的TextView 设置一些通用属性，未满足时，请自定义 layout
*/
flowLayout.setViewPager(mViewPager)
.setTextId(R.id.item_text) //必填，不然 Textview 没效果
.setSelectedColor(Color.WHITE)
.setUnSelectedColor(getResources().getColor(R.color.unselect))
.setDefaultPosition(2);
TabConfig config = new TabConfig.Builder()
.setViewpager(mViewPager)
//.setTextId(R.id.item_text)
.setDefaultTextType(FlowConstants.COLORTEXT)
.setTextConfig(textConfig)
.setSelectedColor(getResources().getColor(R.color.colorAccent))
.setUnSelectColor(getResources().getColor(R.color.unselect))
.build();
```

**其中，如果TextView有颜色变化，setTextId()是必须要设置的!**
**其中，如果设置了layout，setTextId()是必须要设置的!**

**为了避免卡顿，当viewpager结合fragment时，可以有以下优化手段：**
- fragment 布局复杂或者网络加载数据时，建议在懒加载中去初始化或者加载数据
Expand Down Expand Up @@ -233,18 +243,7 @@ private void resFlow(){
//动态设置自定义属性
flowLayout.setTabBean(bean);
flowLayout.setAdapter(new TabFlowAdapter<String>(R.layout.item_msg,mTitle) {
@Override
public void bindView(View view, String data, int position) {
setText(view,R.id.item_text,data);
}
@Override
public void onItemClick(View view, String data, int position) {
super.onItemClick(view, data, position);
mViewPager.setCurrentItem(position);
}
});
flowLayout.setAdapter(new TabFlowAdapter<>(mTitle));
}
```

Expand Down Expand Up @@ -362,6 +361,9 @@ private void resFlow(){
|tab_isAutoScroll|boolean|是否支持自动滚动,默认为true|
|tab_visual_count|integer|可视化个数，比如有一排，我们就只要显示4个，此时宽度均分|
|tab_width_equals_text|boolean|rect 是否根据text的大小来，目前只支持rect和带viewpager和不放大的情况|
|tab_default_textType|enum|默认的控件，normal - TextView，color - TabColorTextView|
|tab_text_select_color|color|选择颜色|
|tab_text_unselect_color|color|未选择颜色|


**TabColorTextView**
Expand Down
7 changes: 0 additions & 7 deletions appx/src/main/java/com/zhengsr/tabhelper/activity/NetTestActivity.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,13 +62,6 @@ protected void onCreate(Bundle savedInstanceState) {
public void bindView(View view, String data, int position) {
setDefaultText(view,data);
}

@Override
public void onItemClick(View view, String data, int position) {
super.onItemClick(view, data, position);
mViewPager.setCurrentItem(position);
}

});


Expand Down
72 changes: 36 additions & 36 deletions appx/src/main/java/com/zhengsr/tabhelper/activity/TabActivity.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.View;

Expand All @@ -18,6 +19,9 @@
import com.zhengsr.tablib.bean.TabBean;
import com.zhengsr.tablib.bean.TabConfig;
import com.zhengsr.tablib.bean.TabValue;
import com.zhengsr.tablib.bean.TextConfig;
import com.zhengsr.tablib.utils.DisplayUtil;
import com.zhengsr.tablib.view.TabColorTextView;
import com.zhengsr.tablib.view.action.BaseAction;
import com.zhengsr.tablib.view.adapter.TabFlowAdapter;
import com.zhengsr.tablib.view.flow.TabVpFlowLayout;
Expand All @@ -34,6 +38,7 @@ public class TabActivity extends BaseActivity {

private ViewPager2 mViewPager;
private CusAdapter2 mViewAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Expand All @@ -47,37 +52,35 @@ protected void onCreate(Bundle savedInstanceState) {
rectFlow();
triFlow();
roundFlow();
resFlow();
colorFlow();
resFlow();
colorFlow();
cusFlow();
}

boolean isDetele = false;
private void rectFlow(){

private void rectFlow() {
final TabVpFlowLayout flowLayout = findViewById(R.id.rectflow);
// flowLayout.setViewPager(mViewPager,R.id.item_text,getResources().getColor(R.color.unselect),Color.WHITE);
TabConfig config = new TabConfig.Builder()
.setViewpager(mViewPager)
.setSelectedColor(Color.WHITE)
.setUnSelectColor(getResources().getColor(R.color.unselect))
.build();



flowLayout.setAdapter(config,new TabFlowAdapter<>(mTitle));
flowLayout.setAdapter(config, new TabFlowAdapter<>(mTitle));


TabVpFlowLayout flowLayout2 = findViewById(R.id.rectflow2);
flowLayout2.setAdapter(config,new TabFlowAdapter<>(mTitle));
flowLayout2.setAdapter(config, new TabFlowAdapter<>(mTitle));

}

private void triFlow(){
private void triFlow() {
TabVpFlowLayout flowLayout = findViewById(R.id.triflow);
flowLayout.setViewPager(mViewPager);
flowLayout.setAdapter(new TabFlowAdapter<String>(mTitle));
}
private void roundFlow(){

private void roundFlow() {
TabVpFlowLayout flowLayout = findViewById(R.id.roundflow);

TabConfig config = new TabConfig.Builder()
Expand All @@ -87,14 +90,15 @@ private void roundFlow(){
.setUnSelectColor(getResources().getColor(R.color.unselect))
.build();
flowLayout.setTabConfig(config);
flowLayout.setAdapter(new TabFlowAdapter<String>(R.layout.item_msg,mTitle) {
flowLayout.setAdapter(new TabFlowAdapter<String>(R.layout.item_msg, mTitle) {
@Override
public void bindView(View view, String data, int position) {
setText(view,R.id.item_text,data);
setText(view, R.id.item_text, data);
}
});
}
private void resFlow(){

private void resFlow() {
final TabVpFlowLayout flowLayout = findViewById(R.id.resflow);

/**
Expand All @@ -116,35 +120,31 @@ private void resFlow(){
flowLayout.setTabBean(bean);

flowLayout.setViewPager(mViewPager);
flowLayout.setAdapter(new TabFlowAdapter<String>(mTitle) );
flowLayout.setAdapter(new TabFlowAdapter<String>(mTitle));
}

private void colorFlow(){
private void colorFlow() {
TabVpFlowLayout flowLayout = findViewById(R.id.colorflow);
int l = DisplayUtil.dip2px(this, 12);
int t = DisplayUtil.dip2px(this, 6);
TextConfig textConfig = new TextConfig()
.setPadding(l, t, l, t)
.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD))
.setTextSize(18);

TabConfig config = new TabConfig.Builder()
.setViewpager(mViewPager)
.setDefaultTextType(FlowConstants.COLORTEXT)
.setTextConfig(textConfig)
.setSelectedColor(getResources().getColor(R.color.colorAccent))
.setUnSelectColor(getResources().getColor(R.color.unselect))
.setDefaultTextSize(16)
.build();

flowLayout.setAdapter(config,new TabFlowAdapter<>(mTitle));
/*flowLayout.setAdapter(config,new TabFlowAdapter<String>(R.layout.item_color_msg,mTitle) {
@Override
public void bindView(View view, String data, int position) {
setText(view,R.id.item_text,data);
}
flowLayout.setAdapter(config, new TabFlowAdapter<>(mTitle));

@Override
public void onItemClick(View view, String data, int position) {
super.onItemClick(view, data, position);
mViewPager.setCurrentItem(position);
}
});*/
}

private void cusFlow(){
private void cusFlow() {
TabVpFlowLayout flowLayout = findViewById(R.id.cusflow);
flowLayout.setCusAction(new CircleAction());
flowLayout.setViewPager(mViewPager);
Expand All @@ -160,11 +160,11 @@ public void config(AbsFlowLayout parentView) {
super.config(parentView);
View child = parentView.getChildAt(0);
if (child != null) {
float l = parentView.getPaddingLeft() + child.getMeasuredWidth()/2;
float t = parentView.getPaddingTop() + child.getMeasuredHeight() - mTabBean.tabHeight/2 -mTabBean.tabMarginBottom;
float l = parentView.getPaddingLeft() + child.getMeasuredWidth() / 2;
float t = parentView.getPaddingTop() + child.getMeasuredHeight() - mTabBean.tabHeight / 2 - mTabBean.tabMarginBottom;
float r = mTabBean.tabWidth + l;
float b = child.getMeasuredHeight() - mTabBean.tabMarginBottom;
mTabRect.set(l,t,r,b);
mTabRect.set(l, t, r, b);
}
}

Expand All @@ -173,16 +173,16 @@ public void config(AbsFlowLayout parentView) {
protected void valueChange(TabValue value) {
super.valueChange(value);
//由于自定义的，都是从left 开始算起的，所以这里还需要加上圆的半径
mTabRect.left = value.left + mTabBean.tabWidth/2;
mTabRect.left = value.left + mTabBean.tabWidth / 2;
}

@Override
public void draw(Canvas canvas) {
canvas.drawCircle(mTabRect.left, mTabRect.top,mTabBean.tabWidth/2,mPaint);
canvas.drawCircle(mTabRect.left, mTabRect.top, mTabBean.tabWidth / 2, mPaint);
}
}

class CusAdapter2 extends FragmentStateAdapter{
class CusAdapter2 extends FragmentStateAdapter {

public CusAdapter2(@NonNull FragmentActivity fragmentActivity) {
super(fragmentActivity);
Expand Down
5 changes: 2 additions & 3 deletions appx/src/main/java/com/zhengsr/tabhelper/activity/TabNoViewPagerActivity.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mTitle.add("Java");
mTitle.add("Android");
// mTitle.add("Kotlin");
setContentView(R.layout.activity_tab_no_view_pager);
TabFlowLayout flowLayout = findViewById(R.id.new_test);
TabConfig config = new TabConfig.Builder()
.setTextId(R.id.item_text).build();
.setTextId(R.id.item_text)
.build();
flowLayout.setAdapter(new TabFlowAdapter<String>( mTitle) {
@Override
public void bindView(View view, String data, int position) {
Expand Down Expand Up @@ -86,7 +86,6 @@ private void rectFlow() {
flowLayout.setAdapter(mAdapter);

TabFlowLayout flowLayout2 = findViewById(R.id.rectflow2);

flowLayout2.setAdapter(new TabFlowAdapter<String>( mTitle3));
}

Expand Down
Loading

0 comments on commit 4c50770

Please sign in to comment.