最近項目自定義的控件比較多,自己也學習了不少,以前覺得自定義很難,研究搗鼓了一段時間,感覺也就那么回事,無非是要計算和繪制,先上效果圖
肥胖程度.png
思路:
自定義view繼承 <code>LinearLayout</code>,里面再包裹兩個LinearLayout
- 第一個LinearLayout里面用來存放帶顏色的<code>textview</code>顯示肥胖的描述
- 第二個LinearLayout里面用來存放肥胖指數的
第一步初始化設置LinearLayout的屬性
public void init() {
// tips = context.getResources().getStringArray(R.array.button_tips);
tips=new String[]{"偏低","正常","正常高值","輕度",
// "中度",
"重度"};
this.setOrientation(LinearLayout.HORIZONTAL);//設置方向橫向
this.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
this.setGravity(Gravity.CENTER);
initButton(position);
}
主要代碼在initButton(int position)中
-
設置第一個LinearLayout的屬性
//初始化所有的都清空 listViews = new ArrayList<>(); this.removeAllViews(); length=0; LinearLayout linearLayout1=new LinearLayout(context); linearLayout1.setOrientation(LinearLayout.HORIZONTAL);//設置方向橫向 linearLayout1.setGravity(Gravity.CENTER);
添加有顏色的文字描述
每個textview顯示的區域是屏幕平分的,當我們需要設置的模塊是第position個的時候,把對應模塊的前后加上padding,其余的正常顯示
for (int i = 0; i < colors.length; i++) {
TextView textView=new TextView(context);
if(position==i+1){
LayoutParams params = new LayoutParams((int)( viewWidth*bili), (int) (( viewWidth*bili)*height_B));
params.setMargins(padding, 0, padding, 0);
textView.setLayoutParams(params);
textView.setTextSize(tips[i].length()>2?(int)(textSize/long_textSize):textSize+2);
// textView.setPadding(4,0,4,0);
}else{
LayoutParams params = new LayoutParams((int)( viewWidth), (int) (viewWidth*height_B));
// params.setMargins(padding, 0, padding, 0);
textView.setLayoutParams(params);
textView.setTextSize(tips[i].length()>2?(int)(textSize/long_textSize):textSize);
// textView.setPadding(4,0,4,0);
}
textView.setGravity(Gravity.CENTER);
textView.setText(tips[i]);
textView.setBackgroundResource(colors[i]);
textView.setTextColor(Color.WHITE);
//保存創建的view
listViews.add(textView);
//添加button
linearLayout1.addView(textView);
}
this.addView(linearLayout1);
-
添加顯示數值的LinearLayout
1. 把屏幕分等分,和上面的顏色分等分一樣,而且寬度也一樣 2. 讓左邊偏移每個view寬度的一半 3. 讓textview居中顯示
說明.png
最后附上github項目