通过更多、收起按钮点击展开数据效果
效果图：
源码：
/** * * Created by Monica on 2016/3/11. */ 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; 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) { mStrList = list; init(); }
//控制文字长度，超过4个字，则使用...代替 int oneW = 70; int twoW = 100; int threeW = 140; int fourW = 160; int fourWmore = 200; //层高 int viewHeight = 70; /** * 控制有多少子控件 */ 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 = 50; lengthY = 0; JSONObject item = mStrList.get(i); //进行赋值 String text = item.optString("cat_name"); 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); } 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 + 50) { // 2 - 判断是否是显示收起按钮 if(isUp == false && row == 1 && width - lengthX <= 400) { txt_up_down.setText("更多"); LayoutParams params3 = new LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params3.leftMargin = width - 160; params3.topMargin = lengthY; this.addView(viewBtn, params3); sizeLength = i; break; } else { //不显示收起按钮 //在这里要判断是否是显示最后一个更多按钮 if(isUp == true && i == (count - 1)) { txt_up_down.setText("收起"); // LayoutParams params = new LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params.leftMargin = width - 160; params.topMargin = lengthY; this.addView(viewBtn, params); sizeLength = i; //标注下到此结束 ，没特殊含义 break; } else { //进行赋值 JSONObject item = mStrList.get(i); //进行赋值 String text = item.optString("cat_name"); 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)) { txt_up_down.setText("收起"); lengthY = lengthY + viewHeight; row ++; // LayoutParams params = new LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params.leftMargin = width - 160; params.topMargin = lengthY; this.addView(viewBtn, params); sizeLength = i; //标注下到此结束 ，没特殊含义 break; } else { lengthX = 50; lengthY = lengthY + viewHeight; row++; //进行赋值 JSONObject item = mStrList.get(i); //进行赋值 String text = item.optString("cat_name"); 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); } } } final int finalI = i; txt_item.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("cat_name").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>
缺陷：
1.文字长度固定，即2控件之间，1个字，和2个字，和3个字，和4个字，和4个多字之间的控件距离不同，只和字数一样的控件之间的距离是一样的
2.里面控制间距的都是使用固定数值，没有根据机型配对相应的数值，如需配对，可在value里去配对
遗留问题：
1.本来想在init中加入各控件，在onLayout方法中去控制各个控件的排放位置，但是，因为还没有在界面上呈现，他在init里的所有view值的属性都是0，获取不到相应的长宽，所以，有什么更好的解决办法，希望大家能提供
2.中间显示的算法太麻烦，有没有更简单的？