感覺好久都沒有登過CSDN了,最近工作任務量還可以,利用空閒時間看了一下自己的博客,發現確實好久沒有更新動態了,下面這個功能也是開發時遇到的,當時卡了一下,現在準備記錄一下,方便以後用時查看。話不多說先看看效果圖吧:
這其實就是個GridView列表這個就不多說了,直接說裏面的adapter和item佈局吧
先上item的佈局:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#fff"
>
<LinearLayout
android:id="@+id/tv_name_l"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_vertical"
android:background="@drawable/real_rect_new"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="36dp">
<TextView
android:id="@+id/tv_data"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="15dp"
android:paddingTop="8dp"
android:gravity="center_vertical"
android:text="3100"
android:textColor="#3d3d3d"
android:textSize="14dp"
android:textStyle="bold"
android:shadowDx="3"
android:shadowDy="4"
android:shadowRadius="4"
android:shadowColor="#00000000"
android:singleLine="true"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/tv_name"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="PM2.5"
android:textSize="12dp"
android:ellipsize="end"
android:textColor="#3d3d3d"
android:gravity="left"
android:maxLines="1"
/>
</LinearLayout>
<TextView
android:id="@+id/tv_unit"
android:layout_marginTop="8dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="μg/m3"
android:textSize="8dp"
android:textColor="#666"
android:paddingRight="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:singleLine="true"
android:gravity="right"
/>
</RelativeLayout>
<ProgressBar
android:visibility="visible"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:id="@+id/bar_sectionreal"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingRight="10dp"
android:maxHeight="10dp"
android:minHeight="10dp"
android:progressDrawable="@drawable/progressbar_bg"
android:max="100"
android:progress="50"/>
</LinearLayout>
</LinearLayout>
其中background="@drawable/real_rect_new"的佈局文件爲:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 個人對於這兩部分中的上下左右的對應佈局變化也不是很瞭解--基本上屬於嘗試型的 -->
<!-- 陰影部分 -->
<item
android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp">
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#0F000000"
android:startColor="#0F000000" />
<corners
android:bottomLeftRadius="6dip"
android:bottomRightRadius="6dip"
android:topLeftRadius="6dip"
android:topRightRadius="6dip" />
</shape>
</item>
<!-- 背景部分 -->
<item
android:left="3dp"
android:top="3dp"
android:right="3dp"
android:bottom="3dp">
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF" />
<corners
android:bottomLeftRadius="6dip"
android:bottomRightRadius="6dip"
android:topLeftRadius="6dip"
android:topRightRadius="6dip" />
</shape>
</item>
</layer-list>
嫌棄上面書寫比較煩的可以直接使用系統自帶的控件以實現陰影效果:
下面就是adapter對應的主要實現代碼:
public View getView(int position, View convertView, ViewGroup parent) {
//自定義視圖
ListItemView listItemView = null;
if (convertView == null) {
listItemView = new ListItemView();
//獲取視圖
convertView = listContainer.inflate(R.layout.list_item_section_real_new, null);
//獲取控件對象
listItemView.tv_name = (TextView)convertView.findViewById(R.id.tv_name);
listItemView.tv_data = (TextView)convertView.findViewById(R.id.tv_data);
listItemView.tv_unit = (TextView)convertView.findViewById(R.id.tv_unit);
listItemView.bar_sectionreal= (ProgressBar) convertView.findViewById(R.id.bar_sectionreal);
//設置控件集到convertView
convertView.setTag(listItemView);
}else {
listItemView = (ListItemView)convertView.getTag();
}
try {
if (listItems.get(position).getChannelName()!=null){
listItemView.tv_name.setText(listItems.get(position).getChannelName()+"");
}
//使用富文本設置數值文本字體
String pripollutants=listItems.get(position).getValue()+"";
if (pripollutants!=null&&pripollutants!=""&&!pripollutants.equals("NULL")){
SpannableString msp = new SpannableString(listItems.get(position).getValue()+"");
if((listItems.get(position).getValue()+"").length()>=6){
//根據文本動態調整字體大小
listItemView.tv_data.setTextSize(TypedValue.COMPLEX_UNIT_DIP,12);
//設置字體大小(絕對值,單位:像素)
msp.setSpan(new AbsoluteSizeSpan(16,true), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}else{
listItemView.tv_data.setTextSize(TypedValue.COMPLEX_UNIT_DIP,16);
msp.setSpan(new AbsoluteSizeSpan(20,true), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}
listItemView.tv_data.setText(msp);
}else {
listItemView.tv_data.setText("--");
}
if (listItems.get(position).getChannelUnit()!=null){
listItemView.tv_unit.setText(listItems.get(position).getChannelUnit()+"");
}else {
listItemView.tv_unit.setText("");
}
String lever=listItems.get(position).getLevel()+"";
Log.e("getdata", "lever:"+lever);
int roundRadius = 15; //圓角半徑
// 準備progressBar帶圓角的背景Drawable
//GradientDrawable對應shape標籤的代碼實現:設置圖形形狀和顏色
GradientDrawable progressBg = new GradientDrawable();
//設置圓角弧度
progressBg.setCornerRadius(roundRadius);
//設置繪製顏色
progressBg.setColor(context.getResources().getColor(R.color.color_e0e0e0));
//準備progressBar帶圓角的進度條Drawable
GradientDrawable progressContent = new GradientDrawable();
progressContent.setCornerRadius(roundRadius);
if (lever!=null){
int color=Integer.parseInt(lever);
listItemView.tv_data.setTextColor(context.getResources().getColor(Tools.setBackColor2(color,"0")));
// listItemView.tv_unit.setTextColor(context.getResources().getColor(Tools.setBackColor2(color,"0")));
//設置繪製顏色,此處可以自己獲取不同的顏色
progressContent.setColor(context.getResources().getColor(Tools.setBackColor2(color,"0")));
}else {
listItemView.tv_data.setTextColor(context.getResources().getColor(Tools.setBackColor2(0,"0")));
// listItemView.tv_unit.setTextColor(context.getResources().getColor(Tools.setBackColor2(0,"0")));
progressContent.setColor(context.getResources().getColor(Tools.setBackColor2(0,"0")));
}
//ClipDrawable對應於clip標籤,它可以根據自己當前的等級(level)來裁剪另一個Drawable,可以控制這個drawable的剪切區域,
//裁剪方向可以通過android:clipOrientation和android:gravity這兩個屬性來共同控制。
ClipDrawable progressClip = new ClipDrawable(progressContent, Gravity.LEFT, ClipDrawable.HORIZONTAL);
//待設置的Drawable數組
Drawable[] progressDrawables = {progressBg, progressClip};
//LayerDrawable對應於layer-list標籤,一種層次化顯示的Drawable集合
//合併進度條背景框和進度條
LayerDrawable progressLayerDrawable = new LayerDrawable(progressDrawables);
//根據ID設置progressBar對應內容的Drawable
progressLayerDrawable.setId(0, android.R.id.background);
progressLayerDrawable.setId(1, android.R.id.progress);
//設置progressBarDrawable
listItemView.bar_sectionreal.setProgressDrawable(progressLayerDrawable);
if (lever!=null){
int progress=Integer.parseInt(lever);
listItemView.bar_sectionreal.setProgress(setProgressValue(progress));
}
} catch (Exception e) {
Log.e("getdata", "err:"+e);
}
return convertView;
}
其中的進度條顏色變色Tools.setBackColor2(0,"0")和進度條百分比setProgressValue(progress),大家可以根據自己項目的需求進行設計。
補充一下,在這種節目佈局時最外層大多是ScrollView,裏面經常還會添加一些圖表和列表,這樣容易造成進入節目後不是從界面頂部開始顯示的,可以在ScrollView裏的第一層佈局(也是唯一的一層)
添加android:descendantFocusability="blocksDescendants",更改焦點即可,關於descendantFocusability的取值及其使用大家可以自行去查看。