ViewPager滑动效果加导航效果


先放上最终效果图:
这里写图片描述
说到ViewPager,这个功能几乎在每个APP内都能见到,现在就让我们探究ViewPager。

那么我们该怎么使用,它和RecyclerView以及ListView一样也需要一个适配,这里我用FragmentPagerAdapter来讲述,其实还可以使用PagerAdapter。

有重要的一点是:
ViewPager最常配合使用Fragment,这是供应和管理每个页面的生命周期的便捷方式。并且谷歌推荐我们使用ViewPager和Fragment来实现滑动的效果。
所以这里我用Fragment来分析。
为了方便观察,我是用RecyclerView来显示数据。

创建Fragment:

public class FirstFragment extends Fragment {
private List<String>mStringList = new ArrayList<>();
private RecyclerView mRecyclerView;
@Override
public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.first_fragmnet,container,false);
initNum();
mRecyclerView = (RecyclerView)view.findViewById(R.id.first_recycler_view);
mRecyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
MyAdapter myAdapter = new MyAdapter(mStringList);
mRecyclerView.setAdapter(myAdapter);
return view;
}
public void initNum(){
for (int i=0;i<100;i++){
mStringList.add("随机数:"+Math.random());
}
}
}



自定义适配器MyAdapter.java:

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
private List<String> mStringList;
static class ViewHolder extends RecyclerView.ViewHolder{
TextView textView;
public ViewHolder(View view){
super(view);
textView = (TextView) view.findViewById(R.id.item_num);
}
}
public MyAdapter(List<String>stringList){
mStringList = stringList;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item,parent,false);
final ViewHolder holder = new ViewHolder(view);
return holder;
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
holder.textView.setText(mStringList.get(position));
}
@Override
public int getItemCount() {
return mStringList.size();
}
}



自定义list_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="50dp">

<TextView
android:id="@+id/item_num"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

</LinearLayout>

first_fragment.xml:

<?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.support.v7.widget.RecyclerView
android:id="@+id/first_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent">

</android.support.v7.widget.RecyclerView>
</LinearLayout>

上述的东西都很常规,如果不懂可以去我的上一篇博客学习,这里就不再作解释了。

接下来才是重点:

新建MyFragmentPagerAdapter.java:

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
public MyFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
if (position == 1){
return new FirstFragment();
}else if (position == 2){
return new FirstFragment();
}
return new FirstFragment();
}
@Override
public int getCount() {
return 3;
}
}



getItem():这个方法很容易明白,表示viewpager的位置,默认位置从0开始,
在哪个位置调用哪个视图。

getcount():记录多少个viewPager的视图个数。


MainActivity.java:

public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView(){
mViewPager = (ViewPager)findViewById(R.id.view_pager);
MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(myFragmentPagerAdapter);
}
}

activity_main.xml:

<?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.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">

</android.support.v4.view.ViewPager>
</LinearLayout>


最后附上效果图:

这里写图片描述



那么如何实现导航的效果呢?其实很简单。
这里使用TabLayout

修改activity_main.xml:

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

<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">


<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>


<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0"/>


</LinearLayout>

</LinearLayout>

修改MainActivity.java:

public class MainActivity extends AppCompatActivity {

private ViewPager mViewPager;
//添加
private TabLayout mTabLayout;

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

initView();

}

private void initView(){
mViewPager = (ViewPager)findViewById(R.id.view_pager);
MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(myFragmentPagerAdapter);

//添加
mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
mTabLayout.setupWithViewPager(mViewPager);

}
}

最后在MyFragmentPagerAdapter.java里添加:

private String[] mTitles = new String[]{"首页", "发现", "排行榜"};
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}

这样就实现了。


效果图:

这里写图片描述

智能推荐

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告