安卓作业----慕课移动应用开发作业11之运用ViewPager、Handler实现图片自动滑动效果，点击图片跳转到对应activity

本博客运用ViewPager、ImageView、TextView等进行界面布局，运用Handler实现图片的自动轮播效果，当点击相应图片，可以跳转到相对应的Activity。

同时这也是中国大学慕课移动终端应用开发的网课作业11，我会持续更新我的作业，如果有需要关注一下吧

说明

1.此作业涉及的文件较多，我尽量将文件目录和实现方法写清楚，如有实现不出效果的可以评论或私聊我
2.由于很多文件都是重复同一种样式，我只会举其中一个栗子
3.强烈安利哈尔的移动城堡！！
4.由于前几天有些事情，没有及时更新，抱歉丫
5.网课作业10较为简单，我就不在博客中实现啦

效果图

目录介绍

java目录下

• HomeworkAdapter.java是适配器
• Image(1-4)Fragment.java 是图片对应的fragment
• HomeworkActivity.java是主Activity
• Image(1-4)Activity.java是图片跳转对应的Activity

res目录下

• item1.png,item2.png是tab图标，一个选中状态一个未选中状态
• pic(1-4).jpg是图片资源
• tab_selector.xml是控制tab选中未选择状态切换的布局文件
• activity_homework.xml是主布局文件
• activity_image(1-4).xml是跳转后对应的Activity的布局文件
• pic_view(1-4).xml是fragment对应的布局文件
• tab_select.xml是自定义tab布局文件

代码部分

由于我的是HomeworkActivity是主Activity，所以要记得调整AndroidManifest.xml。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.course11">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".Image4Activity"></activity>
        <activity android:name=".Image3Activity" />
        <activity android:name=".Image2Activity" />
        <activity android:name=".Image1Activity" />
        <activity android:name=".HomeworkActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity" />
    </application>

</manifest>

给项目添加依赖

implementation 'com.android.support:design:28.0.0'

HomeworkAdapter.java

public class HomeworkAdapter extends FragmentPagerAdapter {
    ArrayList<Fragment> mFragments;

    public HomeworkAdapter(@NonNull FragmentManager fm, int behavior, ArrayList<Fragment> fragments) {
        super(fm, behavior);
        mFragments = fragments;
    }

    public HomeworkAdapter(@NonNull FragmentManager fm, int behavior) {
        super(fm, behavior);
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

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

Image1Fragment.java

还有其他三个我就不写了，格式都是一样的，只要修改部分数字就行

public class Image1Fragment extends Fragment {
    private ImageView mImageView;

    public Image1Fragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.pic_view1,container,false);
        mImageView = view.findViewById(R.id.my_pic1);
        mImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(Image1Activity.newIntent(getActivity()));
            }
        });

        return view;
    }

}

HomeworkActivity.java

public class HomeworkActivity extends AppCompatActivity {
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private HomeworkAdapter mAdapter;
    private TabLayout.Tab mTab1,mTab2,mTab3,mTab4;
    private ArrayList<Fragment> mFragments;

    private int mCount = 0;
    Handler mHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            if (msg.what == 0x123){
                mTabLayout.getTabAt((mCount++)%4).select();
            }
        }
    };

    //线程运行体
    Runnable mRunnable = new Runnable() {
        @Override
        public void run() {
            while (true){
                try{
                    mHandler.sendEmptyMessage(0x123);
                    Thread.sleep(2000);
                }catch (Exception e){
                    e.printStackTrace();
                }
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_homework);
        init();

        FragmentManager fm = getSupportFragmentManager();
        //实例化适配器
        mAdapter = new HomeworkAdapter(fm,0,mFragments);
        //设置适配器
        mViewPager.setAdapter(mAdapter);
        //设置tab
        mTabLayout.setupWithViewPager(mViewPager);

        mTabLayout.setSelectedTabIndicator(0);

        mTab1 = mTabLayout.getTabAt(0);
        mTab2 = mTabLayout.getTabAt(1);
        mTab3 = mTabLayout.getTabAt(2);
        mTab4 = mTabLayout.getTabAt(3);

        mTab1.setCustomView(R.layout.tab_select);
        mTab2.setCustomView(R.layout.tab_select);
        mTab3.setCustomView(R.layout.tab_select);
        mTab4.setCustomView(R.layout.tab_select);

        //启动线程
        Thread thread = new Thread(mRunnable);
        thread.start();
    }

    //实例化部件
    private void init(){
        mFragments = new ArrayList<>();
        mFragments.add(new Image1Fragment());
        mFragments.add(new Image2Fragment());
        mFragments.add(new Image3Fragment());
        mFragments.add(new Image4Fragment());

        mViewPager = findViewById(R.id.homework_view_page);
        mTabLayout = findViewById(R.id.homework_tab_layout);
    }
}

Image1Activity.java

同样的，另外三个我也不写了

public class Image1Activity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image1);
    }

    public static Intent newIntent(Context context){
        return new Intent(context,Image1Activity.class);
    }
}

tab_selector.xml

这是放在drawable文件夹的

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/item2"/>
    <item android:drawable="@drawable/item1"/>
</selector>

activity_homework.xml 主布局文件

<?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="250dp">
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/homework_view_page"
        android:layout_width="match_parent"
        android:layout_height="250dp">
    </androidx.viewpager.widget.ViewPager>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/homework_tab_layout"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:background="#2F1B1A1A"
        android:layout_width="170dp"
        android:layout_height="20dp"
        android:layout_marginBottom="10dp"/>
</RelativeLayout>

activity_image1.xml

另外三个我就不写了

<?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">
    <TextView
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40dp"
        android:text="Activity1"/>

</RelativeLayout>

pic_view1.xml

另外三个我就不写了

扫描二维码关注公众号，回复： 10619874 查看本文章

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/my_pic1"
        android:background="@drawable/pic1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

tab_select.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/tab_selector"/>
</LinearLayout>

总结

关于实现的细节

1.点击图片跳转是fragment到Activity，使用

//具体实现看我代码
startActivity(getActivity(),Activity.class);

2.自动轮播是利用handler,每隔一段时间发送消息，handler处理消息，切换图片

    private int mCount = 0;
    Handler mHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            if (msg.what == 0x123){
                mTabLayout.getTabAt((mCount++)%4).select();
            }
        }
    };

    //线程运行体
    Runnable mRunnable = new Runnable() {
        @Override
        public void run() {
            while (true){
                try{
                    mHandler.sendEmptyMessage(0x123);
                    Thread.sleep(2000);
                }catch (Exception e){
                    e.printStackTrace();
                }
            }
        }
    };

3.主界面布局的时候使用相对布局，将TabLayout放在中下部，是以图标小圆圈的形式呈现

<?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="250dp">
<androidx.viewpager.widget.ViewPager
    android:id="@+id/homework_view_page"
    android:layout_width="match_parent"
    android:layout_height="250dp">
</androidx.viewpager.widget.ViewPager>

<com.google.android.material.tabs.TabLayout
    android:id="@+id/homework_tab_layout"
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"
    android:background="#2F1B1A1A"
    android:layout_width="170dp"
    android:layout_height="20dp"
    android:layout_marginBottom="10dp"/>
</RelativeLayout>

最后

由于文件众多，可能我会粗心大意少写几个文件在博客里，如果有错误，希望大家指出，我会尽快修正。