android应用的首页引导轮播图和banner轮播框架的使用

一、引导页轮播图

说明:项目中的轮播图不要求太多的效果,所以使用了guideshow的jar包

Git地址:https://github.com/javajavadog/guideshow

项目中使用的步骤

1、打开项目的地址,下载其中的jar包,复制到项目中的lib下并右键添加到依赖中

2、让splashActivity继承ABSGuideActivity类并复写所有方法

public class SplashActivity extends AbsGuideActivity {
    private List<SinglePage> guideContent;

//    @Override
//    public void onCreate(Bundle savedInstanceState) {
//        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_splash);
//    }

    @Override
    public List<SinglePage> buildGuideContent() {
        setStatusBarColor();
        guideContent = new ArrayList<>();//创建集合存放轮播图片
        /**
         * 创建第一图片
         */
        SinglePage page1 = new SinglePage();//单个图片对象
        page1.mBackground = getResources().getDrawable(R.mipmap.ic_1);//添加图片
        //页面元素动画
        SingleElement singleElement1 = new SingleElement(200, 200, 400, 400, 0.0f, 1.0f, BitmapFactory.decodeResource(
                getResources(), R.mipmap.ic_stuff));
        SingleElement singleElement2 = new SingleElement(700, 800, 700, 100, 0.0f, 1.0f, BitmapFactory.decodeResource(
                getResources(), R.mipmap.ic_stuff));
        page1.mElementsList.add(singleElement1);//页面添加的两个元素
        page1.mElementsList.add(singleElement2);
        guideContent.add(page1);//图片存放到集合中

 * 在滑动到最后一张图片时,就要点击按钮跳转到主界面
 */
        SinglePage page2 = new SinglePage();
        page2.mCustomFragment = new EntryFragment();//定义一个fragment类,处理跳转的
        guideContent.add(page2);

        return guideContent;
    }

    /**
     * 是否显示下面的小圆点
     * @return
     */
    @Override
    public boolean drawDot() {
        return false;
    }

    /**
     * 未被选中的图片圆点的图片
     * @return
     */
    @Override
    public Bitmap dotDefault() {
        return BitmapFactory.decodeResource(getResources(), R.mipmap.ic_dot_default);
    }

    /**
     * 被选中的圆点图片
     * @return
     */
    @Override
    public Bitmap dotSelected() {
        return BitmapFactory.decodeResource(getResources(), R.mipmap.ic_dot_selected);
    }

    /**
     * 轮播图的个数
     * @return
     */
    @Override
    public int getPagerId() {
 //       return R.id.guide_container;
          return 2;
    }

   

}

 getPagerId()的房return返回的对象也可写成

return R.id.guide_container;

 在项目的res下面创建ids.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="guide_container" type="id"/>
</resources>

3、定义一个EntryFragment类处理跳转

public class EntryFragment extends Fragment {
    FragmentEntryBinding binding;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        setStatusBarColor();
        binding = DataBindingUtil.inflate(inflater, R.layout.fragment_entry, container, false);
        return binding.getRoot();
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        initView();
    }

    private void initView() {
        binding.btnEntry.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(getActivity(), MainActivity.class);//跳转到主界面
                startActivity(intent);
                getActivity().onBackPressed();//销毁自己
            }
        });
    }
   
   
}

布局(没有使用databinding把layout去掉)

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <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:clipToPadding="false"
        android:fitsSystemWindows="true"
        tools:context="com.maijia.QR.fragment.EntryFragment">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@mipmap/ic_4" />

        <Button
            android:id="@+id/btn_entry"
            android:layout_width="160dp"
            android:layout_height="wrap_content"
            android:text="进入"
            android:gravity="center"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true" />

    </RelativeLayout>
</layout>

 OK大功告成,可以划划试试

最后如果项目要求比较多,可以使用海外人士paolorotoloAppIntro框架

Git地址:https://github.com/PaoloRotolo/AppIntro

二、头部banner图轮播

说明:使用的是Git比较火的banner框架

地址:https://github.com/youth5201314/banner

1、添加依赖

dependencies{
    compile 'com.youth.banner:banner:1.4.10'  //最新版本
}

2、清单文件中添加相关的权限

<!-- if you want to load images from the internet -->
<uses-permission android:name="android.permission.INTERNET" /> 

<!-- if you want to load images from a file OR from the internet -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

3、banner的布局

<com.youth.banner.Banner
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="@dimen/base185dp"
    android:layout_marginTop="@dimen/base3dp"
    android:layout_marginBottom="@dimen/base3dp"
    ></com.youth.banner.Banner>

4、设置图片加载器代码

public class GlideImageLoader extends ImageLoader {
    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {
        //具体方法内容自己去选择,次方法是为了减少banner过多的依赖第三方包,所以将这个权限开放给使用者去选择
        Glide.with(context.getApplicationContext())
                .load(path)
                .into(imageView);
    }

    @Override
    public ImageView createImageView(Context context) {
        //圆角
        return new RoundAngleImageView(context);
    }
}

5、项目代码的使用

  //本地图片数据(资源文件)
        List<Integer> list = new ArrayList<>();
        list.add(R.mipmap.b1);
        list.add(R.mipmap.b2);
        list.add(R.mipmap.b3);
        HeaderBinding.banner.setImages(list)
                .setImageLoader(new GlideImageLoader())//图片加载器
                .isAutoPlay(true)
                .setDelayTime(5000)
                .setOnBannerListener(new OnBannerListener() {
                    @Override
                    public void OnBannerClick(int position) {
                        ToastUtil.show(getActivity(),"你点击的是::"+position);
                    }
                })
                .start();


    @Override
    public void onResume() {
        HeaderBinding.banner.startAutoPlay();
        super.onResume();
    }

    @Override
    public void onPause() {
        HeaderBinding.banner.stopAutoPlay();
        super.onPause();
    }

另外:XBanner项目也不错哦

地址:https://github.com/xiaohaibin/XBanner

猜你喜欢

转载自blog.csdn.net/Hunter2916/article/details/83027170