效果图：
11.png
22.png
源码：
public class UpDownBar extends RelativeLayout {
private static final String TAG = "UpDownBar";
// 存放底部菜单的各个文字CheckedTextView
private List<View> mCheckedList = new ArrayList<View>();
//字段集
private List<JSONObject> mStrList = new ArrayList<JSONObject>();
private Context context;
private boolean isUp = false;
private int sizeLength = 0;
//获取的json字段
private String mJsonName;
public UpDownBar(Context context) {
super(context);
this.context = context;
}
public UpDownBar(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
}
public void setList(List<JSONObject> list, String json_name) {
mStrList = list;
mJsonName = json_name;
init();
}
int oneW = (int) getResources().getDimension(R.dimen.up_down_bar_word_one);
int twoW = (int) getResources().getDimension(R.dimen.up_down_bar_word_two);
int threeW = (int) getResources().getDimension(R.dimen.up_down_bar_word_three);
int fourW = (int) getResources().getDimension(R.dimen.up_down_bar_word_four);
int fourWmore = (int) getResources().getDimension(R.dimen.up_down_bar_word_more);
int cell = (int) getResources().getDimension(R.dimen.up_down_bar_cell);
int btn_cell = (int) getResources().getDimension(R.dimen.up_down_bar_btn_cell);
int cell_more = (int) getResources().getDimension(R.dimen.up_down_bar_cell_more);
//层高
int viewHeight = (int) getResources().getDimension(R.dimen.up_down_bar_cell_height);
/**
* 控制有多少子控件
*/
private void init() {
LayoutInflater inflater = LayoutInflater.from(context);
removeAllViews();
mCheckedList.clear();
//初始化x,y值
int lengthX = 0;
int lengthY = 0;
//初始化行数
int row = 0;
int wordLength = 0;
WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
int width = wm.getDefaultDisplay().getWidth();
//获取总个数
int count = mStrList.size();
if(isUp) {
count = count + 1;
}
//进行布局
for(int i = 0; i < count; i++) {
/** 1 - 获取所需的布局 **/
//子控件
View viewItem = inflater.inflate(R.layout.up_down_item, null);
// LinearLayout linear_item = (LinearLayout) viewItem.findViewById(R.id.linear_item);
CheckedTextView txt_item = (CheckedTextView) viewItem.findViewById(R.id.item_name);
//收起、更多按钮
View viewBtn = inflater.inflate(R.layout.up_down_btn, null);
LinearLayout linear_up_down = (LinearLayout) viewBtn.findViewById(R.id.linear_up_down);
TextView txt_up_down = (TextView) viewBtn.findViewById(R.id.txt_up_down);
ImageView img_up_down = (ImageView) viewBtn.findViewById(R.id.img_up_down);
linear_up_down.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if(isUp) {
isUp = false;
removeAllViews();
mCheckedList.clear();
init();
} else {
isUp = true;
removeAllViews();
mCheckedList.clear();
init();
}
}
});
//第一个控件初始化
if(i == 0) {
lengthX = cell;
lengthY = 0;
JSONObject item = mStrList.get(i);
//进行赋值
String text = item.optString(mJsonName);
if(text.length() > 4) {
txt_item.setText(text.substring(0, 4) + "...");
} else {
txt_item.setText(text);
}
LayoutParams params1 = new LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params1.leftMargin = lengthX;
params1.topMargin = lengthY;
this.addView(viewItem, params1);
viewItem.setTag(i);
mCheckedList.add(viewItem);
lengthX = lengthX + getWordSize(i);
sizeLength = i + 1;
} else {
/** 添加其余控件 **/
//1 - 判断是否在同一行
int size = 0;
if(isUp) {
if(i == count - 1) {
size = 200;
} else {
size = getWordSize(i);
}
} else {
size = getWordSize(i);
}
if(width - lengthX > size + cell) {
// 2 - 判断是否是显示收起按钮
if(isUp == false && row == 1 && width - lengthX <= cell_more) {
txt_up_down.setText("更多");
LayoutParams params3 = new LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params3.leftMargin = width - btn_cell;
params3.topMargin = lengthY;
this.addView(viewBtn, params3);
sizeLength = i;
break;
} else {
//不显示收起按钮
//在这里要判断是否是显示最后一个更多按钮
if(isUp == true && i == (count - 1)) {
if(row > 2) {
txt_up_down.setText("收起");
//
LayoutParams params = new LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.leftMargin = width - btn_cell;
params.topMargin = lengthY;
this.addView(viewBtn, params);
sizeLength = i;
}
//标注下到此结束 ，没特殊含义
break;
} else {
//进行赋值
JSONObject item = mStrList.get(i);
//进行赋值
String text = item.optString(mJsonName);
if(text.length() > 4) {
txt_item.setText(text.substring(0, 4) + "...");
} else {
txt_item.setText(text);
}
LayoutParams params2 = new LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params2.leftMargin = lengthX;
params2.topMargin = lengthY;
this.addView(viewItem, params2);
viewItem.setTag(i);
mCheckedList.add(viewItem);
lengthX = lengthX + getWordSize(i);
}
}
} else {
//判断需要新起一行
//首先判断是否到已经无显示 ，只需要显示更多按钮
if(isUp == true && i == (count - 1)) {
if(row > 2) {
txt_up_down.setText("收起");
lengthY = lengthY + viewHeight;
row++;
//
LayoutParams params = new LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.leftMargin = width - btn_cell;
params.topMargin = lengthY;
this.addView(viewBtn, params);
sizeLength = i;
}
//标注下到此结束 ，没特殊含义
break;
} else {
lengthX = cell;
lengthY = lengthY + viewHeight;
row++;
//进行赋值
JSONObject item = mStrList.get(i);
//进行赋值
String text = item.optString(mJsonName);
if(text.length() > 4) {
txt_item.setText(text.substring(0, 4) + "...");
} else {
txt_item.setText(text);
}
LayoutParams params3 = new LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params3.leftMargin = lengthX;
params3.topMargin = lengthY;
this.addView(viewItem, params3);
viewItem.setTag(i);
mCheckedList.add(viewItem);
lengthX = lengthX + getWordSize(i);
}
}
sizeLength = i + 1;
}
final int finalI = i;
viewItem.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// 设置底部图片和文字的显示
setTabsDisplay(context, finalI);
if (null != mTabListener) {
// tab项被选中的回调事件
mTabListener.onUpDownSelect(finalI);
}
}
});
}
}
/**
* 设置底部导航中图片显示状态和字体颜色
*/
public void setTabsDisplay(Context context, int index) {
int size = sizeLength;
for (int i = 0; i < size; i++) {
View viewItem = mCheckedList.get(i);
CheckedTextView txt_item = (CheckedTextView) viewItem.findViewById(R.id.item_name);
if ((Integer) (viewItem.getTag()) == index) {
txt_item.setBackgroundResource(R.drawable.orange_in_round_shape);
txt_item.setTextColor(Color.rgb(255, 126, 0));
} else {
txt_item.setBackgroundResource(R.drawable.grey_in_round_shape);
txt_item.setTextColor(Color.rgb(147, 147, 147));
}
}
}
private int getWordSize(int i) {
int wordLength = 0;
//获取数值长度
JSONObject item = mStrList.get(i);
//进行赋值
int wordSize = item.optString(mJsonName).length();
switch (wordSize) {
case 1:
wordLength = oneW;
break;
case 2:
wordLength = twoW;
break;
case 3:
wordLength = threeW;
break;
case 4:
wordLength = fourW;
break;
default:
wordLength = fourWmore;
break;
}
return wordLength;
}
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
this.setMeasuredDimension(width, height);
for(int i = 0; i < this.getChildCount(); ++i) {
View child = this.getChildAt(i);
child.measure(0, 0);
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
// 回调接口，用于获取tab的选中状态
private OnUpDownListener mTabListener;
public void setOnUpDownSelectedListener(OnUpDownListener listener) {
this.mTabListener = listener;
}
}
布局：up_down_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="match_parent">
<CheckedTextView
android:text="65852365"
android:layout_centerInParent="true"
android:textColor="#9c9c9c"
android:drawablePadding="5dp"
android:id="@+id/item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:gravity="center"
android:textSize="14sp"
android:background="@drawable/grey_in_round_shape"
android:layout_gravity="center"/>
</LinearLayout>
up_down_btn.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="right"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/linear_up_down"
android:orientation="horizontal"
android:gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/txt_up_down"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="更多"
android:layout_centerInParent="true"
android:textColor="#666666"
android:textSize="14sp" />
<ImageView
android:layout_gravity="center_vertical"
android:id="@+id/img_up_down"
android:layout_width="10dp"
android:layout_height="6dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
/>
</LinearLayout>
</LinearLayout>
字间距数值（15为一个字）
<!-- UpDownbar 数值 -->
<dimen name="up_down_bar_cell">20dp</dimen>
<dimen name="up_down_bar_cell_height">35dp</dimen>
<dimen name="up_down_bar_btn_cell">60dp</dimen>
<dimen name="up_down_bar_cell_more">200dp</dimen>
<dimen name="up_down_bar_word_one">30dp</dimen>
<dimen name="up_down_bar_word_two">45dp</dimen>
<dimen name="up_down_bar_word_three">60dp</dimen>
<dimen name="up_down_bar_word_four">75dp</dimen>
<dimen name="up_down_bar_word_more">95dp</dimen>
遗留问题：
1.本来想在init中加入各控件，在onLayout方法中去控制各个控件的排放位置，但是，因为还没有在界面上呈现，他在init里的所有view值的属性都是0，获取不到相应的长宽，所以，有什么更好的解决办法，希望大家能提供
2.中间显示的算法太麻烦，有没有更简单的？
网友评论