安卓作業----慕課移動應用開發作業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

另外三個我就不寫了

<?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>

最後

由於文件衆多，可能我會粗心大意少寫幾個文件在博客裏，如果有錯誤，希望大家指出，我會盡快修正。