Android:Fragment 与 ViewPager的配合使用

于 2016-04-12 21:03:43 发布
阅读量384 收藏
点赞数 1
分类专栏： Android 开发 文章标签： android viewpager 碎片化 手机 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csdn906372411/article/details/51137148
版权

自从大屏手机的引入，Fragment这个碎片化的控件的使用变得必不可少，然而我之前做了一个用fragment的app以后发现，只有点击换页这样超级不人性化而且还很落后

所以我找了一下网上的Fragment和ViewPager两者结合的代码，然而并没有，那我只好自己摸索了，最后当然是做出来了（哇咔咔！）废话不多说了，直接上代码


首先，我们需要主页面的布局如下：

（其中的图标是我从网上随意找的，大家也可以上网找）

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.android_fragmenttest1.MainActivity" >

    <RelativeLayout
        android:id="@+id/actionbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#999999" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="这不是微信"
            android:textColor="#FFFFFF"
            android:textSize="22sp" />
    </RelativeLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/line"
        android:layout_below="@id/actionbar"
        android:orientation="vertical" >
    </android.support.v4.view.ViewPager>

    <ImageView
        android:id="@+id/line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_above="@+id/bottomlist"
        android:background="#444444" />

    <LinearLayout
        android:id="@+id/bottomlist"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/llchat"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/chatting"
                android:layout_width="50dp"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="4"
                android:contentDescription="@string/app_name"
                android:src="@drawable/chat" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:text="聊天" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/llbook"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/book"
                android:layout_width="50dp"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="4"
                android:contentDescription="@string/app_name"
                android:src="@drawable/contacts" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:text="通讯录" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/llfriendship"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/friendship"
                android:layout_width="50dp"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="4"
                android:contentDescription="@string/app_name"
                android:src="@drawable/friendship" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:text="朋友圈" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/llsetting"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/setting"
                android:layout_width="50dp"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="4"
                android:contentDescription="@string/app_name"
                android:src="@drawable/setting" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:text="设置" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>


然后就是各个Fragment的布局了

（然而我其实比较懒，虽然写了四个布局文件，但其实区别就只有text和layout的背景颜色而已）

（所以这里就给出一个，其余的自己改改就好了）


<?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"
    android:background="#788778" >

    <RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#788778" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="这不是朋友圈"
        android:textSize="40sp"
        android:textColor="#FFFFFF" />

</RelativeLayout>

</RelativeLayout>


然后是Fragment的类了

（注意重写onCreateView这个方法就好了）

（需要注意的是导包的问题，到的是support包）


package com.example.android_fragmenttest1;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class friendshipFragment extends Fragment {

 public friendshipFragment() {
  // TODO Auto-generated constructor stub
 }

 @Override
 public void onCreate(Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  super.onCreate(savedInstanceState);
 }

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  View view = inflater.inflate(R.layout.fragment_friendship, null);
  return view;
 }

}



按照这个把其中的 R.layout.fragment_friendship 改成其他的布局的id就好了


然后重点就是MainActivity这个类了 


import java.util.ArrayList;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
import android.graphics.Color;
import android.os.Bundle;

public class MainActivity extends FragmentActivity implements OnClickListener,
  OnPageChangeListener {

 /** ViewPager的控件 */
 private ViewPager viewpager;
 /** 装载着Fragment的list对象 */
 private ArrayList<Fragment> list = new ArrayList<Fragment>();
 /** 装载着LinearLayout的list对象 */
 private ArrayList<LinearLayout> lllist = new ArrayList<LinearLayout>();
 /** 聊天的image */
 private ImageView chat;
 /** 聊天的book */
 private ImageView book;
 /** 聊天的friendship */
 private ImageView friendship;
 /** 聊天的setting */
 private ImageView setting;
 /** 用于记录上一个被改变颜色的LinearLayout */
 private LinearLayout keeper = null;
 /** 按键聊天所在版块 */
 private LinearLayout llchat;
 /** 按键通讯录所在版块 */
 private LinearLayout llbook;
 /** 按键朋友圈所在版块 */
 private LinearLayout llfriendship;
 /** 按键设置所在版块 */
 private LinearLayout llsetting;
 /** 颜色的代码 */
 private int colorchange = Color.parseColor("#666666");
 /** 颜色的代码 */
 private int colorreturn = Color.parseColor("#FFFFFF");

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  // 去除actionbar
  requestWindowFeature(Window.FEATURE_NO_TITLE);
  setContentView(R.layout.activity_main);

  // 列表项的添加和viewpager的设置
  listedit();

  // 设置按钮背景颜色
  settingBackgroundColor();

 }

 /** 设置按钮背景颜色 */
 private void settingBackgroundColor() {
  // TODO Auto-generated method stub

  // 查找资源
  chat = (ImageView) findViewById(R.id.chatting);
  book = (ImageView) findViewById(R.id.book);
  friendship = (ImageView) findViewById(R.id.friendship);
  setting = (ImageView) findViewById(R.id.setting);
  llchat = (LinearLayout) findViewById(R.id.llchat);
  llbook = (LinearLayout) findViewById(R.id.llbook);
  llfriendship = (LinearLayout) findViewById(R.id.llfriendship);
  llsetting = (LinearLayout) findViewById(R.id.llsetting);

  lllist.add(llchat);
  lllist.add(llbook);
  lllist.add(llfriendship);
  lllist.add(llsetting);

  // 设置按键监听
  chat.setOnClickListener(this);
  book.setOnClickListener(this);
  friendship.setOnClickListener(this);
  setting.setOnClickListener(this);
  keeper = llchat;
  keeper.setBackgroundColor(colorchange);

 }

 /** 列表项的添加和viewpager的设置 */
 private void listedit() {
  // TODO Auto-generated method stub

  list.add(new chatFragment());
  list.add(new bookFragment());
  list.add(new friendshipFragment());
  list.add(new settingFragment());

  viewpager = (ViewPager) findViewById(R.id.viewpager);
  viewpager.setAdapter(new MyAdapter(getSupportFragmentManager()));
  viewpager.setOnPageChangeListener(this);

 }

 /** 按键被点击后的操作 */
 private void clickAction(int i, LinearLayout layout) {
  // TODO Auto-generated method stub.

  // viewpager.getCurrentItem();
  keeper.setBackgroundColor(colorreturn);
  keeper = layout;
  keeper.setBackgroundColor(colorchange);
  viewpager.setCurrentItem(i);

 }

//当滑动时底下的图标的背景色的变化
 private void clickAction2(LinearLayout layout) {
  // TODO Auto-generated method stub.

  keeper.setBackgroundColor(colorreturn);
  keeper = layout;
  keeper.setBackgroundColor(colorchange);

 }

 //监听当相应按键被点击时所需要的相应的操作
 @Override
 public void onClick(View v) {
  // TODO Auto-generated method stub

  switch (v.getId()) {
  case R.id.chatting:
   clickAction(0, lllist.get(0));

   break;
  case R.id.book:
   clickAction(1, lllist.get(1));
   break;

  case R.id.friendship:
   clickAction(2, lllist.get(2));

   break;

  case R.id.setting:
   clickAction(3, lllist.get(3));

   break;

  default:
   break;
  }

 }

 class MyAdapter extends FragmentPagerAdapter {

  public MyAdapter(android.support.v4.app.FragmentManager fm) {
   super(fm);
   // TODO Auto-generated constructor stub
  }

  @Override
  public Fragment getItem(int arg0) {
   // TODO Auto-generated method stub
   return list.get(arg0);
  }

  @Override
  public int getCount() {
   // TODO Auto-generated method stub
   return list.size();
  }

 }

 // 点击时调用
 @Override
 public void onPageScrollStateChanged(int arg0) {
  // TODO Auto-generated method stub

 }

 // 滑动时调用
 @Override
 public void onPageScrolled(int arg0, float arg1, int arg2) {

 }

 @Override
 public void onPageSelected(int arg0) {
  // TODO Auto-generated method stub
  clickAction2(lllist.get(arg0));

 }

}

到这里就ok了，这里面就是ViewPager和Fragment结合以后写出来的能滑动的Fragment app了

















评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值