Android fragment中广告图片轮播效果的实现(附图 )

作者刚刚接触android小白一枚,这是本人在CSDN上写的第一篇博客。。出于写博客的目的:一也是最重要的想让像我这样的android初学者少走点弯路,本以为这个功能实现起来挺简单的,但是项目要求在fragment上实现,这两天百度了n条教程都没有比较容易搞懂的,各种下demo各种改最后还是失败。。。。最后终于在一篇没有图示的博客上找到了方法原作者的链接在这,二是记录下自己的开发经验,三是体验下写博客的感觉。。。。;而且内容不是我原创的,只不过是他人博客的详细说明原作者的博客http://ww  w.cnbl ogs.com/yoyohong/p/5688913.ht ml;废话不多说上方法:

要实现这个轮播其实真的挺简单,要把这个效果实现到你的项目上,代码只需要复制两段,首先是布局,在layout文件夹新建一个xml,就叫buju.xml好了然后复制

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<FrameLayout
android:layout_width="match_parent"
android:layout_height="300dip" >

<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dip"
android:layout_gravity="bottom"
android:background="#33000000"
android:gravity="center"
android:orientation="vertical" >

<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="图片标题"
android:textColor="@android:color/white" />

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dip"
android:orientation="horizontal" >

<View
android:id="@+id/dot_0"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_yes"/>

<View
android:id="@+id/dot_1"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_no"/>
<View
android:id="@+id/dot_2"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_no"/>
<View
android:id="@+id/dot_3"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_no"/>
<View
android:id="@+id/dot_4"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_no"/>

</LinearLayout>
</LinearLayout>
</FrameLayout>

</RelativeLayout>

这里dot_no和dot_yes就是图片中暗小点和亮小点,自己百度两个小点的图片吧;顺便把广告图也找了,全部复制到drawable文件夹;之后是fragment,新建一个fragment,复制粘贴
package com***************;

import android.app.Fragment;
import android.os.Bundle;
import android.os.Handler;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.R;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

/**
 * Created by Administrator on 2016/7/13.
 */
public class HomeFragment extends Fragment {

    private View mView;
    private ViewPager mViewPaper;
    private List<ImageView> images;
    private List<View> dots;
    private int currentItem;
    //记录上一次点的位置
    private int oldPosition = 0;
    //存放图片的id
    private int[] imageIds = new int[]{
            R.drawable.home_bg,
            R.drawable.home_bg,
            R.drawable.home_bg,
            R.drawable.home_bg,
            R.drawable.home_bg
    };
    //存放图片的标题
    private String[] titles = new String[]{
            "轮播1",
            "轮播2",
            "轮播3",
            "轮播4",
            "轮播5"
    };
    private TextView title;
    private ViewPagerAdapter adapter;
    private ScheduledExecutorService scheduledExecutorService;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        mView=inflater.inflate(R.layout.fragment_home_layout, null);
        setView();
        return mView;
    }
    private void setView(){
        mViewPaper = (ViewPager)mView.findViewById(R.id.vp);

        //显示的图片
        images = new ArrayList<ImageView>();
        for(int i = 0; i < imageIds.length; i++){
            ImageView imageView = new ImageView(getActivity());
            imageView.setBackgroundResource(imageIds[i]);
            images.add(imageView);
        }
        //显示的小点
        dots = new ArrayList<View>();
        dots.add(mView.findViewById(R.id.dot_0));
        dots.add(mView.findViewById(R.id.dot_1));
        dots.add(mView.findViewById(R.id.dot_2));
        dots.add(mView.findViewById(R.id.dot_3));
        dots.add(mView.findViewById(R.id.dot_4));

        title = (TextView) mView.findViewById(R.id.title);
        title.setText(titles[0]);

        adapter = new ViewPagerAdapter();
        mViewPaper.setAdapter(adapter);

        mViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {


            @Override
            public void onPageSelected(int position) {
                title.setText(titles[position]);
                dots.get(position).setBackgroundResource(R.drawable.dot_yes);
                dots.get(oldPosition).setBackgroundResource(R.drawable.dot_no);

                oldPosition = position;
                currentItem = position;
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

    /*定义的适配器*/
    public class ViewPagerAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            return images.size();
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }

        @Override
        public void destroyItem(ViewGroup view, int position, Object object) {
            // TODO Auto-generated method stub
//          super.destroyItem(container, position, object);
//          view.removeView(view.getChildAt(position));
//          view.removeViewAt(position);
            view.removeView(images.get(position));
        }

        @Override
        public Object instantiateItem(ViewGroup view, int position) {
            // TODO Auto-generated method stub
            view.addView(images.get(position));
            return images.get(position);
        }

    }

    /**
     * 利用线程池定时执行动画轮播
     */
    @Override
    public void onStart() {
        // TODO Auto-generated method stub
        super.onStart();
        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
        scheduledExecutorService.scheduleWithFixedDelay(
                new ViewPageTask(),
                2,
                2,
                TimeUnit.SECONDS);
    }


    /**
     * 图片轮播任务
     * @author liuyazhuang
     *
     */
    private class ViewPageTask implements Runnable{

        @Override
        public void run() {
            currentItem = (currentItem + 1) % imageIds.length;
            mHandler.sendEmptyMessage(0);
        }
    }

    /**
     * 接收子线程传递过来的数据
     */
    private Handler mHandler = new Handler(){
        public void handleMessage(android.os.Message msg) {
            mViewPaper.setCurrentItem(currentItem);
        };
    };
    @Override
    public void onStop() {
        // TODO Auto-generated method stub
        super.onStop();
        if(scheduledExecutorService != null){
            scheduledExecutorService.shutdown();
            scheduledExecutorService = null;
        }
    }
}

报错肯定有,一个个,慢慢的把错误都改过来,首先是包名.R,之后是你导入的图片的名字换一下,还有布局用的名字。。。编译通过,这样就ok了。看看效果, 还是可以的吧。。


  • 34
    点赞
  • 133
    收藏
    觉得还不错? 一键收藏
  • 51
    评论
以下是一个在fragment自动轮播图片的示例代码: ```java public class BannerFragment extends Fragment { private ViewPager mViewPager; private List<Integer> mImageList; private int mCurrentPage = 0; private Timer mTimer; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_banner, container, false); mViewPager = (ViewPager) view.findViewById(R.id.view_pager); mImageList = new ArrayList<>(); mImageList.add(R.drawable.image1); mImageList.add(R.drawable.image2); mImageList.add(R.drawable.image3); mViewPager.setAdapter(new BannerPagerAdapter()); startAutoPlay(); return view; } private void startAutoPlay() { mTimer = new Timer(); mTimer.schedule(new TimerTask() { @Override public void run() { getActivity().runOnUiThread(new Runnable() { @Override public void run() { if (mCurrentPage == mImageList.size()) { mCurrentPage = 0; } mViewPager.setCurrentItem(mCurrentPage++, true); } }); } }, 3000, 3000); } private class BannerPagerAdapter extends PagerAdapter { @Override public int getCount() { return mImageList.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView imageView = new ImageView(getActivity()); imageView.setImageResource(mImageList.get(position)); container.addView(imageView); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } } @Override public void onDestroy() { super.onDestroy(); if (mTimer != null) { mTimer.cancel(); } } } ``` 这个示例代码使用了ViewPager和一个Timer来实现自动轮播,每隔3秒钟就会自动切换到下一张图片。PagerAdapter的作用是为ViewPager提供数据源。在onCreateView方法,我们创建了一个BannerPagerAdapter,然后将其设置给ViewPager。最后在onDestroy方法,我们取消了Timer的计时任务,以免内存泄漏。
评论 51
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值