安卓Gallery之自定义图片边框

    作为一个初入门级别安卓菜鸟,我从CSDN上也学到了不少的东西,今天想着写篇文章作为自己的处女秀,力求一篇文章解决一个问题,如标题所说,希望老鸟勿喷。

   


上面是一张效果图,由于还没细细研究gif动画得制作,大家就将就着看了,下面上代码,代码即文档,鄙人喜欢把代码注释的比较完善,所以就不多解释了。

首先是MainActivity,自己看代码,图片数组资源在drawable中引用。

public class MainActivity extends Activity implements OnItemSelectedListener{

	/** 界面上指示当前照片的TextView控件 **/
	private TextView tv_index;
	/** 界面上的Galley控件 **/
	private Gallery mGallery;
	/**Gallery的适配器**/
	private MyGalleryAdapter mAdapter ;
	/** 测试用的图片数组。该数组就是图片资源的引用 **/
	private Integer[] imgs = new Integer[] { R.drawable.pic01,
			R.drawable.pic02, R.drawable.pic03, R.drawable.pic04,
			R.drawable.pic05, };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// 加载界面布局文件
		setContentView(R.layout.activity_main);
		// 初始化界面控件
		initView();

	}

	/** 初始化界面的控件 **/
	private void initView() {
		// 获取界面的控件
		tv_index = (TextView) this.findViewById(R.id.txtIndex);
		mGallery = (Gallery) this.findViewById(R.id.galleryShow);

		// 为Gallery新建适配器,传入图片数组
		mAdapter = new MyGalleryAdapter(this,imgs);
		// 为Gallery配置适配器
		mGallery.setAdapter(mAdapter);
		// 为mGallery绑定选中监听器,否则指示器不工作
		mGallery.setOnItemSelectedListener(this);
	}


	@Override
	public void onItemSelected(AdapterView<?> parent, View view, int position,
			long id) {
		// TODO Auto-generated method stub
		// 设置照片指示器,指示当前照片的张数和总数
		tv_index.setText((position+1)+"/"+mAdapter.getCount());
	}

	@Override
	public void onNothingSelected(AdapterView<?> parent) {
		// TODO Auto-generated method stub
		
	}

}

接着看Gallery的适配器MyGalleryAdapter

@SuppressWarnings("deprecation")
public class MyGalleryAdapter extends BaseAdapter {

	/** 运行的上下文环境 **/
	private Context context = null;
	/** 要进行展示的相册的数组,从外部传入的参数 **/
	private Integer[] imgs = null;
	/** gallery中的ImageView控件 **/
	private ImageView imgView = null;
	/**边框的宽度**/
	private static final int BOUND_WIDTH = 5 ;

	public MyGalleryAdapter() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * 自定义Gallery构造参数
	 * 
	 * @param context
	 *            运行的上下文环境
	 * @param imgs
	 *            要展示的相片的数组
	 */
	public MyGalleryAdapter(Context context, Integer[] imgs) {
		super();
		this.context = context;
		this.imgs = imgs;
	}

	/**
	 * 自定义Gallery构造参数
	 * 
	 * @param context
	 *            运行的上下文环境
	 */
	public MyGalleryAdapter(Context context) {
		super();
		this.context = context;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return imgs.length;
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public long getItemId(int id) {
		// TODO Auto-generated method stub
		return id;
	}

	// 这个方法很重要
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		// 首先这里的imgView是Gallery中将要显示的图片的容器,已经定义成全局变量
		imgView = new ImageView(context);
		// 设置图片的来源,外部传入的图片数组
		imgView.setImageResource(imgs[position]);
		// 设置图片自适应边界
		imgView.setAdjustViewBounds(true);
		// 由于相框的边框宽度设置为向内收缩的大小,上下左右四个方向向内收缩的大小
		imgView.setPadding(BOUND_WIDTH, BOUND_WIDTH, BOUND_WIDTH, BOUND_WIDTH);
		// 适应整个屏幕
		imgView.setScaleType(ScaleType.FIT_XY);
		// 设置LayoutParams参数
		imgView.setLayoutParams(new Gallery.LayoutParams(
				LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));

		// 在该ImageView的外面再包一层布局,这层布局用来作为边框
		LinearLayout linearLay = new LinearLayout(context);
		linearLay.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
				LayoutParams.MATCH_PARENT));
		// 设置边框的背景
		linearLay.setBackgroundResource(R.drawable.main_photo_frame);
		// 将ImageView添加到这个布局中去,然后返回该布局
		linearLay.addView(imgView);
		// 返回具有边框的布局
		return linearLay;
	}

}
适配器中最重要的部分是重写的getView的方法,代码中我已经做了详细的注释,其余的部分大家可以自行研究。

然后是MainActivity中的布局文件,一个文本框,用来做相册的指示器,一个Gallery控件,测试的时候,越简单越能研究透彻一个控件。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.cjt.gallerydemo.MainActivity" >

    <!-- 指示当前的照片 -->
    <TextView
        android:id="@+id/txtIndex"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:textSize="20sp"
        android:textStyle="bold" />

    <!-- 展示照片的Gallery -->
    <Gallery
        android:id="@+id/galleryShow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:spacing="10dp"
        android:layout_alignLeft="@+id/txtIndex"
        android:layout_below="@+id/txtIndex"/>

</RelativeLayout>

最后是getView中
// 设置边框的背景
		linearLay.setBackgroundResource(R.drawable.main_photo_frame);
这一句中引用xml文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners android:radius="2dp" />

    <!-- 线条的颜色和宽度 -->
    <!-- 这里边框的颜色属性和宽度可以自行设定,宽度设定的时候注意跟MyGalleryAdapter中的 private static final int BOUND_WIDTH = 5 保持一致 -->
    <stroke
        android:width="5dp"
        android:color="#F89" />

    <!-- 填充部分的颜色 -->
    <solid android:color="#0fff" />

    <!-- 收缩 -->
    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />

</shape>

好了,到此就大功告成了,想要修改边框的宽度或者颜色什么的都可以在这个xml文件中修改,


源码下载

            

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

涛声依旧Cjt

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值