TabLayout和ViewPager、Fragment的滑动页面的实现
程序员文章站
2022-07-13 16:36:14
...
TabLayout和ViewPager、Fragment的滑动页面的实现
首先自定义Fragment和创建Fragment 对应的Layout
package com.example.administrator.viewpagertablayouttest;
import android.annotation.SuppressLint;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.text.Layout;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
@SuppressLint("ValidFragment")
public class MyFragment extends Fragment {
public String title;
public String content;
public int img;
private View view;
public MyFragment() {
}
public MyFragment(String title, String content, int img) {
this.title = title;
this.content = content;
this.img = img;
}
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_layout,container,false);
return view;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
TextView titleTxt = view.findViewById(R.id.frag_title);
TextView contentTxt = view.findViewById(R.id.frag_content);
ImageView imgView = view.findViewById(R.id.frag_img);
titleTxt.setText(title);
contentTxt.setText(content);
imgView.setImageResource(img);
}
public String getTitle() {
return title;
}
public String getContent() {
return content;
}
public int getImg() {
return img;
}
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_gravity="center"
android:id="@+id/frag_img"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="200dp"
android:src="@drawable/a"/>
<LinearLayout
android:layout_gravity="center"
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="200dp">
<TextView
android:id="@+id/frag_title"
android:layout_gravity="center"
android:text="南山"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_marginTop="15dp"
android:id="@+id/frag_content"
android:text="南山,古称南头。先秦时期属百越,秦汉之时,南山属南海郡辖;汉代南头为盐官驻地;三国时设置司盐都尉所,并在南头城修筑司盐都尉垒,称“芜城”。"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
然后自定义Adapter
package com.example.administrator.viewpagertablayouttest;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
public class MyFragmentAdapter extends FragmentPagerAdapter {
public List<MyFragment> myFragmentList;
public MyFragmentAdapter(FragmentManager fm, List<MyFragment> myFragmentList) {
super(fm);
this.myFragmentList = myFragmentList;
}
@Override
public Fragment getItem(int i) {
return myFragmentList.get(i);
}
@Override
public int getCount() {
return myFragmentList.size();
}
public String getPageTitle(int i){
return myFragmentList.get(i).getTitle();
}
}
最后在MainActivity中实现布局
package com.example.administrator.viewpagertablayouttest;
import android.support.design.widget.TabLayout;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private String[] contents = new String[]{"123","456","789"};
private String[] titles = new String[]{"ab","cd","ef"};
private int[] imgs = new int[]{R.drawable.a,R.drawable.c,R.drawable.b};
private List<MyFragment> myFragmentList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabLayout tabLayout = findViewById(R.id.tab);
ViewPager pager = findViewById(R.id.pager);
initView();
MyFragmentAdapter adapter = new MyFragmentAdapter(getSupportFragmentManager(),myFragmentList);
pager.setAdapter(adapter);
tabLayout.setupWithViewPager(pager);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
}
private void initView() {
for (int i = 0; i < contents.length; i++) {
myFragmentList.add(new MyFragment(titles[i],contents[i],imgs[i]));
}
}
}
MainActivity的布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"></android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
</LinearLayout>
上一篇: xargs和管道符 "|"的区别
下一篇: Android Switch控件修改样式
推荐阅读
-
TabLayout和ViewPager、Fragment的滑动页面的实现
-
安卓底部导航栏的实现以及用TabLayout+ViewPager+Fragment实现页面滑动切换
-
TabLayout+ViewPager实现切页的示例代码
-
android使用TabLayout+NestedScrollView 实现详情界面tab页 关联 上下滑动视图的效果
-
TabLayout和Fragment实现点击和滑动切换
-
安卓底部导航栏的实现以及用TabLayout+ViewPager+Fragment实现页面滑动切换
-
TabLayout+ViewPager实现切页的示例代码
-
Android简单的Fragment+Viewpager切换(可滑动和点击切换)
-
android使用TabLayout+NestedScrollView 实现详情界面tab页 关联 上下滑动视图的效果