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);
}