本博客运用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>最后
由于文件众多，可能我会粗心大意少写几个文件在博客里，如果有错误，希望大家指出，我会尽快修正。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
