Android自定义控件之应用程序首页轮播图
现在基本上大多数的Android应用程序的首页都有轮播图,就是像下图这样的(此图为转载的一篇博文中的图,拿来直接用了):
像这样的组件我相信大多数的应用程序都会使用到,本文就是自定义一个这样的组件,可以动态设置图片的张数。下面就开始本次的自定义之旅吧,首先看一下自定义控件的的布局文件:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> <span style="white-space:pre"> </span><!--此LinearLayout用来小圆点--> <LinearLayout android:id="@+id/linearlayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:gravity="center" android:orientation="horizontal" android:padding="5dp" > </LinearLayout> </RelativeLayout>布局文件看完之后,我们再来看一下自定义控件相对应的java类吧:
具体代码如下:
package com.gc.view; import java.util.ArrayList; import java.util.List; import java.util.concurrent.Executors; import java.util.concurrent.ScheduledExecutorService; import java.util.concurrent.TimeUnit; import com.gc.image.ImageLoaderWraper; import com.gc.testviewpagerfragment.R; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.drawable.Drawable; import android.os.Handler; import android.os.Message; import android.os.Parcelable; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.View; import android.widget.FrameLayout; import android.widget.ImageView; import android.widget.ImageView.ScaleType; import android.widget.LinearLayout; import android.widget.RelativeLayout; /** * ViewPager实现的轮播图广告自定义视图; * 既支持自动轮播页面也支持手势滑动切换页面,可以动态设置图片的张数 * @author Android将军 * */ @SuppressLint("HandlerLeak") public class SlideShowView extends FrameLayout { private ImageLoaderWraper imageLoaderWraper;//UIL开源框架的使用,主要用来加载图片防止OOM private final static boolean isAutoPlay = true; private List<String> imageUris; private List<ImageView> imageViewsList; private List<ImageView> dotViewsList; private LinearLayout mLinearLayout; private ViewPager mViewPager; private int currentItem = 0; private ScheduledExecutorService scheduledExecutorService; @SuppressLint("HandlerLeak") private Handler handler = new Handler(){ @Override public void handleMessage(Message msg) { // TODO Auto-generated method stub super.handleMessage(msg); mViewPager.setCurrentItem(currentItem); } }; public SlideShowView(Context context) { this(context,null); } public SlideShowView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public SlideShowView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); // TODO Auto-generated constructor stub initUI(context); if(!(imageUris.size()<=0)) { System.out.println("XXXXXXXXXXXX"); setImageUris(imageUris); } if(isAutoPlay){ startPlay(); } } private void initUI(Context context){ imageViewsList = new ArrayList<ImageView>(); dotViewsList = new ArrayList<ImageView>(); imageUris=new ArrayList<String>(); imageLoaderWraper=ImageLoaderWraper.getInstance(context.getApplicationContext()); LayoutInflater.from(context).inflate(R.layout.layout_slideshow, this, true); mLinearLayout=(LinearLayout)findViewById(R.id.linearlayout); mViewPager = (ViewPager) findViewById(R.id.viewPager); } public void setImageUris(List<String> imageuris) { for(int i=0;i<imageuris.size();i++) { imageUris.add(imageuris.get(i)); System.out.println("YYYYYYYYYY"); } LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT); lp.setMargins(5, 0, 0, 0); for(int i=0;i<imageUris.size();i++){ ImageView imageView=new ImageView(getContext()); imageView.setScaleType(ScaleType.FIT_XY);//铺满屏幕 System.out.println("GGGGG:"+imageUris.get(i)); imageLoaderWraper.displayImage(imageUris.get(i), imageView);//用开源框架加载图片,读者可以自行更改,使用setsetBackgroundResource也行 System.out.println("JJJJJJ"); imageViewsList.add(imageView); System.out.println("JJJJJJ55555"); ImageView viewDot = new ImageView(getContext()); System.out.println("JJJJJJ88888"); if(i == 0){ viewDot.setBackgroundResource(R.drawable.dot_black); }else{ viewDot.setBackgroundResource(R.drawable.dot_white); } //viewDot.setImageResource(R.drawable.dot_white); System.out.println("JJJJJJ9999"); viewDot.setLayoutParams(lp); dotViewsList.add(viewDot); mLinearLayout.addView(viewDot); } mViewPager.setFocusable(true); mViewPager.setAdapter(new MyPagerAdapter()); mViewPager.setOnPageChangeListener(new MyPageChangeListener()); } private void startPlay(){ scheduledExecutorService = Executors.newSingleThreadScheduledExecutor(); scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1, 4, TimeUnit.SECONDS); } @SuppressWarnings("unused") private void stopPlay(){ scheduledExecutorService.shutdown(); } /** * 设置选中的tip的背景 * @param selectItems */ private void setImageBackground(int selectItems){ for(int i=0; i<dotViewsList.size(); i++){ if(i == selectItems){ dotViewsList.get(i).setBackgroundResource(R.drawable.dot_black); }else{ dotViewsList.get(i).setBackgroundResource(R.drawable.dot_white); } } } private class MyPagerAdapter extends PagerAdapter{ @Override public void destroyItem(View container, int position, Object object) { // TODO Auto-generated method stub //((ViewPag.er)container).removeView((View)object); ((ViewPager)container).removeView(imageViewsList.get(position)); } @Override public Object instantiateItem(View container, int position) { // TODO Auto-generated method stub ((ViewPager)container).addView(imageViewsList.get(position)); return imageViewsList.get(position); } @Override public int getCount() { // TODO Auto-generated method stub return imageViewsList.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0 == arg1; } @Override public void restoreState(Parcelable arg0, ClassLoader arg1) { // TODO Auto-generated method stub } @Override public Parcelable saveState() { // TODO Auto-generated method stub return null; } @Override public void startUpdate(View arg0) { // TODO Auto-generated method stub } @Override public void finishUpdate(View arg0) { // TODO Auto-generated method stub } } private class MyPageChangeListener implements OnPageChangeListener{ boolean isAutoPlay = false; @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub switch (arg0) { case 1: isAutoPlay = false; break; case 2: isAutoPlay = true; break; case 0: if (mViewPager.getCurrentItem() == mViewPager.getAdapter().getCount() - 1 && !isAutoPlay) { mViewPager.setCurrentItem(0); } else if (mViewPager.getCurrentItem() == 0 && !isAutoPlay) { mViewPager.setCurrentItem(mViewPager.getAdapter().getCount() - 1); } break; } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageSelected(int pos) { // TODO Auto-generated method stub setImageBackground(pos % imageUris.size()); } } private class SlideShowTask implements Runnable{ @Override public void run() { // TODO Auto-generated method stub synchronized (mViewPager) { currentItem = (currentItem+1)%imageViewsList.size(); handler.obtainMessage().sendToTarget(); } } } @SuppressWarnings("unused") private void destoryBitmaps() { for (int i = 0; i < imageViewsList.size(); i++) { ImageView imageView = imageViewsList.get(i); Drawable drawable = imageView.getDrawable(); if (drawable != null) { drawable.setCallback(null); } } } }说过自定义控件的布局和相应类之后,我们就要来使用它了,那么我们怎么去使用这个呢,请看下面的内容。
在你的工程中如果想要使用该自定义控件,你需要把自定义控件的布局文件拷贝到你的layout文件夹下,然后将上面的类拷贝到你的工程里去,在你自己的布局文件中这样引用该控件,代码,如下:
<com.gc.view.SlideShowView android:id="@+id/slideshowView" android:layout_width="fill_parent" android:layout_height="140dp" android:layout_marginTop="10dp" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" /> <!--com.gc.view是SlideShowView所在的包名,大家使用时需把此包名换成自己的包名-->然后在相应的Activity或Fragment中这样动态设置图片:
(1)先通过findviewbyid获得该控件】
(2)调用该控件的setImageUris的方法
具体代码如下所示:
<span style="white-space:pre"> </span>List<String> imageUris=new ArrayList<String>(); imageUris.add("http://e.hiphotos.baidu.com/image/pic/item/d6ca7bcb0a46f21ffac59520f4246b600d33aed4.jpg"); imageUris.add("http://a.hiphotos.baidu.com/image/pic/item/ac345982b2b7d0a2549f27eac9ef76094b369a76.jpg"); imageUris.add("http://b.hiphotos.baidu.com/image/pic/item/d52a2834349b033b12e5c3c317ce36d3d539bdbd.jpg"); imageUris.add("assets://one.jpg"); imageUris.add("assets://two.jpg"); imageUris.add("assets://three.jpg");//上面代码是初始化图片的URI路径 <span style="font-family:Arial, Helvetica, sans-serif;"><span style="white-space:pre"> </span> mSlideShowView=(SlideShowView)findViewById(R.id.slideshowView);</span> <span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre"> </span> mSlideShowView.setImageUris(imageUris);</span>然后在应用程序中的效果如下:
好了,该自定义控件的使用就是这样的。相信大家也应该明白了,如果有不对的地方欢迎指出,或者有不明白可以回复留言。
转载请注明出处:http://blog.csdn.net/android_jiangjun/article/details/39638129
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。