ListView 显示柱状图，并解决滚动时内容重复的问题

效果图如下：

思路：

1.      给数据源

2.      创建一个类继承自BaseAdapter

3.      将自定的adapter赋给页面中的listView

项目类结构：

下面是绑定ListView的具体细节

1.      创建android应用程序com.example.ListViewDemo

2.      在activity_main.xml中，添加ListView控件

<ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
</ListView>

3.      创建模拟数据源

public class NameValue {
        
         public String name;
         public int value;
         public String filter;//用于分组使用
         public NameValue(String name,int value,String filter){
                   this.name = name;
                   this.value = value;
                   this.filter = filter;
         }
        
         public static ArrayList<NameValue> setValues() {
                   ArrayList<NameValue> options =new ArrayList<NameValue>();
                   {
                            options.add(newNameValue("a", 10,"aaa"));
                            options.add(newNameValue("a1", 31,"aaa"));
                            options.add(newNameValue("a2", 3,"aaa"));
                            options.add(newNameValue("a3", 20,"bbb"));
                            options.add(newNameValue("a4", 350,"bbb"));
                            options.add(newNameValue("a5", 310,"bbb"));
                            options.add(newNameValue("a6", 320,"ccc"));
                            options.add(newNameValue("a7", 330,"bbb"));
                            options.add(newNameValue("a8", 230,"ccc"));
                            options.add(newNameValue("a9", 130,"ccc"));
                   }
                   return options;
}

4.       

4.1创建item_template.xml    ，用于显示数据的长度

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@color/chart_bg">
 
<TextView
        android:id="@+id/textview_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:ellipsize="end"
        android:singleLine="true"
        android:text="123"
        android:textColor="@color/white"
        android:textSize="30sp"
        android:layout_marginRight="5dip"/>
</ RelativeLayout >

4.2在colors.xml中定义背景颜色

<color name="white">#FFFFFF</color>
<color name="chart_bg">#FF9900</color>

 

4.3 自定义ChartView类,根据数字改变其长度，继承自RelativeLayout

public class ChartView extends RelativeLayout{
         private TextView textView; 
         public ChartView(Context context, AttributeSet attrs) {
                   super(context, attrs);
                   LayoutInflater inflater=(LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.item_template,this); 
       
        textView=(TextView)findViewById(R.id.textview_num);
         }
 
         public void setTextViewText(String text){
                   textView.setText(text);
         }
}

4.4   设置每一项的样式，创建item.xml

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_marginLeft="10dip"
    android:layout_marginRight="10dip">
   
    <TextView
            android:id="@+id/textview_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:ellipsize="end"
            android:textSize="18sp"
            android:text="name"
            android:layout_marginLeft="10dip"
                    android:layout_marginRight="10dip"
            />
 
    <com.example.listviewdemo.view.ChartView
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dip"
        android:layout_marginRight="10dip"/>
   
         <TextViewandroid:layout_width="match_parent"
             android:layout_height="1dip"
             android:background="@color/chart_bg"
             android:layout_marginTop="7dip"/>
</LinearLayout>

5.          添加MyAdapter类，需继承自BaseAdapter

public class MyAdapter extends BaseAdapter {
 
         ArrayList<NameValue> nvl;
         Context context;
         int max;
         int width;
         public MyAdapter(Context context,ArrayList<NameValue> nvl,int width){
                   this.nvl = nvl;
                   this.context = context;
                   this.width = width;
                   this.max = selectMaxValue(nvl);
         }
        
         /**
          * 查询数组中的最大值
          * @param options
          * @return
          */
         private int selectMaxValue(ArrayList<NameValue> options){
                   if(options ==null){
                            return 0;
                   }
                   int max = 0;
                   max = options.get(0).value;
                   for (int i = 0; i < options.size(); i++) {
                            if(options.get(i).value > max){
                                     max = options.get(i).value ;
                            }
                   }
                   return max;
         }
        
         @Override
         public int getCount() {
                   // TODO Auto-generated method stub
                   return nvl.size();
         }
 
         @Override
         public Object getItem(int arg0) {
                   // TODO Auto-generated method stub
                   return nvl.get(arg0);
         }
 
         @Override
         public long getItemId(int position) {
                   // TODO Auto-generated method stub
                   return position;
         }
 
         @Override
         public View getView(int position, View convertView, ViewGroup parent) {
                   myListItem myList = null;
                   TextView textview_name = null;
                   if(convertView ==null)
                   {
                            System.out.println("为空：" + position);   
                            myList = new myListItem();
                            convertView = LayoutInflater.from(context).inflate(R.layout.item,null,false);
                           
                            textview_name = (TextView)convertView.findViewById(R.id.textview_name);
                            ChartView chart = (ChartView)convertView.findViewById(R.id.chart);
                           
                            myList.textview_name = textview_name;
                            myList.chart = chart;
                            convertView.setTag(myList);
                   }
                   else 
                   {
                            myList = (myListItem)convertView.getTag();
                            System.out.println("不为空：" + position);
                   }
                  
                   NameValue nv = nvl.get(position);
                   myList.textview_name.setText(nv.name);
                   myList.chart.setTextViewText(String.valueOf(nv.value));
                   android.view.ViewGroup.LayoutParams lp2 = myList.chart.getLayoutParams();
                  
                   //计算值占屏幕的宽度，40是去除左右留下的边距
                    int a = (int) ((this.width - DensityUtil.dip2px(context, 40))* nv.value/max);
                    lp2.width = a;
                  
                    if(a<20){
                             myList.chart.setTextViewText(String.valueOf(""));
                    }
                   return convertView;
         }
                  
         /**
          * Item 项中的数据结构，解决listView滚动时，内容重复问题，此类定义每个Item项包含的内容    
          * @author Administrator
          *
          */
         static class myListItem{
           TextView textview_name;
           ChartView chart;
         }
}

6.      准备工作完成后，让我们在MainActivity中调用吧

@Override
         protected void onCreate(Bundle savedInstanceState) {
                   super.onCreate(savedInstanceState);
                   setContentView(R.layout.activity_main);
                   ListView listView = (ListView)findViewById(R.id.listView);
                   ArrayList<NameValue> values = NameValue.getNameValues();
                   //width:当前设备的宽度
                   int width =this.getWindowManager().getDefaultDisplay().getWidth();
                   MyAdapter mydapter = new MyAdapter(MainActivity.this, values, width);
                   listView.setAdapter(mydapter);
         }