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

}

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