感觉好久都没有登过优快云了,最近工作任务量还可以,利用空闲时间看了一下自己的博客,发现确实好久没有更新动态了,下面这个功能也是开发时遇到的,当时卡了一下,现在准备记录一下,方便以后用时查看。话不多说先看看效果图吧:
这其实就是个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的取值及其使用大家可以自行去查看。