前面我们已经用listView和recyclerView实现了列表布局,可以做到列表纵向滑动显示屏幕外的数据。其中recyclerView还能实现横向的滑动。但是如果我们的需求是横向滑动切换不同的界面,那么以上的方法就不能满足我们的需求。所以,今天我们要用到的view Pager和fragment。
首先看一下要完成的效果图:
每次向左滑动界面,就会从首页跳到功能页,再跳到捐助我们,反之同理。如何实现呢?
首先,创建一个MainActivity,用来显示主页面,在MainActivity.xml中,在你需要滑动的地方添加ViewPager
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
包名必须完整,不然无效。有了这个,才能实现滑动界面。
然后在你的主界面设置几个textView,和几个imageView。每个textView正上方分别对应一个ImageView,这需要在LinearLayout里嵌套两个LinearLayout,外置的LinearLayout为vertical,内置的为horizontal,然后将他们的平均排列,最后居中对齐即可。整个代码如下:
<?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="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.wei.i_like_study.enter">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/main"
android:layout_weight="1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/function"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/money"
android:layout_weight="1"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="首页"
android:textSize="16dp" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="功能"
android:textSize="16dp" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="捐助我们"
android:textSize="16dp" />
</LinearLayout>
</LinearLayout>
有了布局,我们就需要分别为三个textView创建一个布局,这里我们用fragment来布局,所以创建三个fragment,然后分别进行布局。
这里我们创建oneFragment,twoFragment,threeFragment三个Fragment.
在创建fragment_one,fragment_two,fragment_three分别对应三个Fragment.
fragment中的核心内容很简单,就是一个加载布局
package com.example.wei.i_like_study;
import android.content.pm.ActivityInfo;
import android.content.res.Configuration;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by WEI 哥 on 2018/7/2.
*/
public class oneFragment extends android.support.v4.app.Fragment {
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_one, null); //将布局加载到view中
return view;
}
}
关于它的xml文件,其实和activity的xml一样,这个就让读者自己根据自己的业务需求自行完善。因为三个fragment其实可以一样,所以这里就不再赘述。下面看看如何实现滑动切换界面的。
首先说一下大致思路,将Fragment存放到数组,监听屏幕滑动事件,将对应的fragment取出来并显示在界面。
然后说一说实现,和recyclerView一样,我们要用到自定义适配器,命名为FragmentAdapter
package com.example.wei.i_like_study;
/**
* Created by WEI 哥 on 2018/7/2.
*/
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class FragmentAdapter extends FragmentPagerAdapter {
private FragmentManager mfragmentManager;
private List<Fragment> mlist;
public FragmentAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
this.mlist = list;
}
@Override
public Fragment getItem(int arg0) {
return mlist.get(arg0);//显示第几个页面
}
@Override
public int getCount() {
return mlist.size();//有几个页面
}
}
然后,将每个Fragment都放入list,监听TextView的点击和屏幕的滑动,屏幕的滑动viewPager内部已经帮我们实现,所以只需调用
setOnPageChangeListener这个函数即可
具体代码,如下:
package com.example.wei.i_like_study;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class enter extends AppCompatActivity implements OnClickListener{
private TextView textView1,textView2,textView3;
private ViewPager myViewPager;
private List<Fragment> list; //存放fragment数组
private FragmentAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_enter);
InitView(); //主界面
textView1.setOnClickListener(this);
textView2.setOnClickListener(this);
textView3.setOnClickListener(this);
myViewPager.setOnPageChangeListener(new MyPagerChangeListener());
list = new ArrayList<>();
list.add(new oneFragment());
list.add(new twoFragment());
list.add(new threeFragment());
adapter = new FragmentAdapter(getSupportFragmentManager(), list);
myViewPager.setAdapter(adapter);
myViewPager.setCurrentItem(0); //初始化显示第一个页面
textView1.setTextColor(Color.RED); //被选中就为红色
}
private void InitView() {
textView1=(TextView)findViewById(R.id.textView1);
textView2=(TextView)findViewById(R.id.textView2);
textView3=(TextView)findViewById(R.id.textView3);
myViewPager = (ViewPager) findViewById(R.id.viewPager);
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.textView1:
myViewPager.setCurrentItem(0); //将点击的textView所对应的页面显示出来
textView1.setTextColor(Color.RED);textView1.setTextSize(20);
textView2.setTextColor(Color.GRAY);textView2.setTextSize(16);
textView3.setTextColor(Color.GRAY);textView3.setTextSize(16);
break;
case R.id.textView2:
myViewPager.setCurrentItem(1);
textView2.setTextColor(Color.RED);textView2.setTextSize(20);
textView1.setTextColor(Color.GRAY);textView1.setTextSize(16);
textView3.setTextColor(Color.GRAY);textView3.setTextSize(16);
break;
case R.id.textView3:
myViewPager.setCurrentItem(2);
textView3.setTextColor(Color.RED);textView3.setTextSize(20);
textView2.setTextColor(Color.GRAY);textView1.setTextSize(16);
textView1.setTextColor(Color.GRAY);textView2.setTextSize(16);
break;
}
}
public class MyPagerChangeListener implements OnPageChangeListener { //监听屏幕的滑动
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) { //当前选中的页面textView颜色改变
switch(position){
case 0:
textView1.setTextColor(Color.RED);textView1.setTextSize(20);
textView2.setTextColor(Color.GRAY);textView2.setTextSize(16);
textView3.setTextColor(Color.GRAY);textView3.setTextSize(16);
break;
case 1:
textView2.setTextColor(Color.RED);textView2.setTextSize(20);
textView1.setTextColor(Color.GRAY);textView1.setTextSize(16);
textView3.setTextColor(Color.GRAY);textView3.setTextSize(16);
break;
case 2:
textView3.setTextColor(Color.RED);textView3.setTextSize(20);
textView2.setTextColor(Color.GRAY);textView1.setTextSize(16);
textView1.setTextColor(Color.GRAY);textView2.setTextSize(16);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
}
当屏幕滑动,下面对应的textView颜色也会相应变化,这样用户才会知道到底处于哪一个界面。
当然,fragment里面的内容是要根据自己的业务逻辑改变的,值得注意的是,我们主页面已经有了横向滑动切换页面,那么它的几个fragment里面不能再有其他的横向滑动了,这样会造成冲突。
好了,关于横向滑动切换页面就讲到这里了,下期我们来聊聊关于三大键的屏蔽