Android项目 三 冷笑话页面卡片式样式

fragment_smile.xml是冷笑话页面的布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <me.maxwin.view.XListView        android:id="@+id/listview"        android:layout_width="fill_parent"        android:layout_height="match_parent"        android:layout_margin="10dp"        android:clipToPadding="false"        android:divider="@android:color/transparent"        android:dividerHeight="20dp"        android:scrollbarStyle="outsideOverlay"        tools:listitem="@layout/smile_item_1" >    </me.maxwin.view.XListView></LinearLayout>

我们重写ListView子item的样式，smile_item_1.xml是item的样式文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/selectable_background"    android:orientation="vertical" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content" >        <com.red.view.CircleImageView            android:id="@+id/iv1"            android:layout_width="40dp"            android:layout_height="40dp"            android:layout_marginTop="3dp"            android:layout_marginLeft="3dp" />        <TextView            android:id="@+id/sname"            style="@style/ListItemText"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:paddingLeft="3dp"            android:paddingTop="9dp" />        <FrameLayout            android:layout_width="match_parent"            android:layout_height="match_parent" >            <TextView                android:id="@+id/stalk"                style="@style/ListItemText"                android:layout_width="60dp"                android:layout_height="wrap_content"                android:layout_gravity="right"                android:background="@drawable/abc_btn_switch_to_on_mtrl_00012"                android:gravity="center" />        </FrameLayout>    </LinearLayout>    <TextView        android:id="@+id/scontent"        android:layout_width="match_parent"        android:layout_height="wrap_content" />    <View        android:id="@+id/list_item_seperator"        android:layout_width="match_parent"        android:layout_height="1dip"        android:layout_marginLeft="5dip"        android:layout_marginRight="5dip"        android:background="@color/light_grey" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:layout_marginTop="10dp"        android:layout_marginBottom="10dp" >        <ImageView            android:id="@+id/iv2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:src="@drawable/s1"             />        <ImageView            android:id="@+id/iv3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:src="@drawable/s2"             />        <ImageView            android:id="@+id/iv5"            android:layout_width="wrap_content"            android:layout_height="wrap_content"           android:gravity="right"            android:src="@drawable/s3"             android:layout_weight="3"/>    </LinearLayout></LinearLayout>

CircleImageView是我们自定义的ImageView样式，它的功能是实现我们圆形头像的效果，CircleImageView类：

public class CircleImageView extends ImageView {      private Paint paint = new Paint();      public CircleImageView(Context context) {          super(context);      }      public CircleImageView(Context context, AttributeSet attrs) {          super(context, attrs);      }      public CircleImageView(Context context, AttributeSet attrs, int defStyle) {          super(context, attrs, defStyle);      }      @Override      protected void onDraw(Canvas canvas) {          Drawable drawable = getDrawable();        if (null != drawable) {        Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();        Bitmap b = toRoundCorner(bitmap, 14);        paint.reset();        canvas.drawBitmap(b, new Rect(0, 0, b.getWidth(), b.getHeight()),        new Rect(0, 0, getWidth(), getHeight()), paint);        } else {        super.onDraw(canvas);        }    }      private Bitmap toRoundCorner(Bitmap bitmap, int pixels) {        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),                  bitmap.getHeight(), Config.ARGB_8888);          Canvas canvas = new Canvas(output);          final int color = 0xff424242;          final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());          paint.setAntiAlias(true);          canvas.drawARGB(0, 0, 0, 0);          paint.setColor(color);          int x = bitmap.getWidth();          canvas.drawCircle(x / 2, x /2, x / 2 , paint);          paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));          canvas.drawBitmap(bitmap, rect, rect, paint);          return output;          }}  

到这里，我们已经将卡片式布局好了，接下来我们重写我们的适配器，SmileAdapter是我们冷笑话的适配器

public class SmileAdapter extends BaseAdapter {    private List<SmileBean> items;    private ImageThread imageThread=new ImageThread();    private final Context context;    public SmileAdapter(Context context, List<SmileBean> items) {        this.context = context;        this.items = items;    }    @Override    public int getCount() {        return items.size();    }    @Override    public SmileBean getItem(int position) {        return items.get(position);    }    @Override    public long getItemId(int position) {        return position;    }    @Override    public View getView(final int position, View convertView, ViewGroup parent) {        ViewHolder holder;        if (convertView == null) {            convertView = LayoutInflater.from(context).inflate(                    R.layout.smile_item_1, null);            holder = new ViewHolder();            holder.sname = (TextView) convertView                    .findViewById(R.id.sname);            holder.scontent=(TextView) convertView                    .findViewById(R.id.scontent);            holder.stalk=(TextView) convertView                    .findViewById(R.id.stalk);            holder.s1=(CircleImageView) convertView                    .findViewById(R.id.iv1);            holder.s2=(ImageView) convertView                    .findViewById(R.id.iv2);            holder.s3=(ImageView) convertView                    .findViewById(R.id.iv3);            holder.s4=(ImageView) convertView                    .findViewById(R.id.iv5);            convertView.setTag(holder);        } else {            holder = (ViewHolder) convertView.getTag();        }        holder.sname.setText(items.get(position).getsName());        holder.scontent.setText(items.get(position).getsContent());        holder.stalk.setText(String.valueOf(items.get(position).getsTalk()));        if(holder.s1.getDrawable()==null){        imageThread.loadImageByVolley(items.get(position).getsIcon(),holder.s1);        }        holder.s1.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                // TODO Auto-generated method stub                Toast.makeText(                        context,                        "Clicked on right Action Button of List Item "                                + position, Toast.LENGTH_SHORT).show();            }        });        holder.s2.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                // TODO Auto-generated method stub                Toast.makeText(                        context,                        "Clicked on Left Action Button of List Item "                                + position, Toast.LENGTH_SHORT).show();            }        });        holder.s3.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                // TODO Auto-generated method stub                Toast.makeText(                        context,                        "Clicked on right Action Button of List Item "                                + position, Toast.LENGTH_SHORT).show();            }        });        holder.s4.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                // TODO Auto-generated method stub                Toast.makeText(                        context,                        "Clicked on right Action Button of List Item "                                + position, Toast.LENGTH_SHORT).show();            }        });        return convertView;    }    private static class ViewHolder {        private TextView sname;        private TextView scontent;        private TextView stalk;        private CircleImageView s1;        private ImageView s2;        private ImageView s3;        private ImageView s4;    }}

到这里我们就将冷笑话页面做好了，我们可以看下效果图