viewpager+fregment+layoutbottom的

作者: 又二 | 来源:发表于2017-12-15 14:52 被阅读0次

1先在activity的布局中将自定义的控件摆好

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="@color/resetPassBg"
    android:orientation="vertical"
    tools:context="android.coolweather.com.xinguangfirstactivitydemo.MainActivity">

    <android.coolweather.com.xinguangfirstactivitydemo.fragment.MainViewPaper
        android:id="@+id/myViewPager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:layout_above="@+id/myBottomLayout"
        />
        <android.coolweather.com.xinguangfirstactivitydemo.fragment.MainViewPaper
            android:id="@+id/myViewPager"
            android:layout_width="match_parent"
            android:layout_height="0px"
            android:layout_weight="1"
            android:layout_above="@+id/myBottomLayout"
            />

        <android.coolweather.com.xinguangfirstactivitydemo.MyBottomLayout
            android:id="@+id/myBottomLayout"
            android:layout_width="match_parent"
            android:layout_height="@dimen/px98"
            android:background="#fff231" />
    </LinearLayout>

2关于MainViewPager的代码，首先是三个构造方法，无论调用哪个都会走其初始化，初始化中的layout_bottom布局也在下方。
初始化方法initview中首先1显示寻找到底部三个include进来的控件，然后2初始化数值让他开始显示第一个被点击，最后3设置三个控件的点击事件。

设置setOnclickListner后重写onClick方法，利用switch判断点击的是哪个控件，然后分别设置他们的图标和颜色利用setResidAndColor方法。

setResidAndColor这个方法调用changDataItem方法（他的参数1是图片的选中数组，2是文字选中排序数字），对他们进行分别得设置，方法中传入的参数不同。

3这里1创建了了一个接口方法
public interface ICallbackListener {
public void click(int id);
}
然后对外提供调用方法2 setOnCallbackListener，他的参数即为接口，并且我们在onclick事件中调用了他3 iCallbackListener.click(v.getId());
当我们在4 activity中调用setOnCallbackListener的时候，我们会重写click方法，并且会将你点中的控件的int值传递给我们，当你点击控件的时候，就会走我们activity中复写的click方法，我们就可以设置当前的fregment，实现底部导航栏与fregment联动。

package android.coolweather.com.xinguangfirstactivitydemo;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;


public class MyBottomLayout extends LinearLayout implements View.OnClickListener{
    private Context context;
    private RelativeLayout homeLayout;
    private RelativeLayout messageLayout;
    private RelativeLayout mineLayout;
    private ICallbackListener iCallbackListener = null;

    public MyBottomLayout(Context context) {
        super(context);
        this.context = context;
        initView();
    }

    public MyBottomLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        initView();
    }

    public MyBottomLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        initView();
    }

    /**
     * 初始化
     */
    private void initView(){
        View view = LayoutInflater.from(context).inflate(R.layout.layout_bottom, this);
        findView(view);
        initData();
        initListener();
    }

    /**
     * 找到控件的方法
     *
     * @param view
     */
    private void findView(View view) {
        homeLayout = (RelativeLayout) view.findViewById(R.id.homeLayout);
        messageLayout = (RelativeLayout) view.findViewById(R.id.messageLayout);
        mineLayout = (RelativeLayout) view.findViewById(R.id.mineLayout);
    }
    /**
     * 初始化数据
     */
    private void initData() {
        setResidAndColor(0);
    }



    public void setResidAndColor(int i) {
        switch (i) {
            case 0:
                changeDataItem(setResid(new int[] {1, 0, 0}),
                        new int[] {1, 0, 0});
                break;
            case 1:
                changeDataItem(setResid(new int[] {0, 1, 0}),
                        new int[] {0, 1, 0});
                break;
            case 2:
                changeDataItem(setResid(new int[] {0, 0, 1}),
                        new int[] {0, 0, 1});
                break;

        }
    }


    /**
     * 控件的监听事件
     */
    private void initListener() {
        homeLayout.setOnClickListener(this);
        messageLayout.setOnClickListener(this);
        mineLayout.setOnClickListener(this);
    }

    /**
     * 控件的点击事件
     * 点击后改变显示的图标和文字的颜色
     * @param v
     */
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.homeLayout:
                setResidAndColor(0);
                break;
            case R.id.messageLayout:
                setResidAndColor(1);
                break;
            case R.id.mineLayout:
                setResidAndColor(2);
                break;
        }

        //这里加入了一个接口方法，留给ViewPager去实现
        //功能是点击item后viewPager也会跟着变
        iCallbackListener.click(v.getId());
    }


    /**
     * 把所有的数据整合一起进行抽取
     */
    private void changeDataItem(int[] resid, int[] color) {
        initDataItem(homeLayout, resid[0], "首页", color[0]);
        initDataItem(messageLayout, resid[1], "消息", color[1]);
        initDataItem(mineLayout, resid[2], "我的", color[2]);
    }

    /**
     * 初始化数据的抽取方法
     * @param resid
     * @param name
     * @param color
     */
    private void initDataItem(View view, int resid, String name, int color) {
        view.findViewById(R.id.tabImg).setBackgroundResource(resid);
        TextView tv = (TextView) view.findViewById(R.id.tabText);
        tv.setText(name);
//        tv.setTextColor( (color == 1) ? getResources().getColor(R.color) : Color.WHITE);
    }

    public int[] setResid(int[] resid) {
       int resHome =  (resid[0] == 1) ?  R.drawable.main_home_press : R.drawable.main_home;
       int resMessage =  (resid[1] == 1) ?  R.drawable.main_msg_press : R.drawable.main_msg;
       int resMine =  (resid[2] == 1) ?  R.drawable.main_mine_press : R.drawable.main_mine;
       return new int[] {resHome, resMessage, resMine};
    }

    //初始化接口，由需要实现activity（MainActivity）调用
    //通过findviewbyid获取MyBottomLayout，进行调用
    public void setOnCallbackListener(ICallbackListener iCallbackListener) {
        this.iCallbackListener = iCallbackListener;
    }
    //自定义接口文件，click方法由调用处实现，功能是完成viewpager的滑动
    public interface ICallbackListener {
        public void click(int id);
    }
}

3layout_bottom的代码，三个include横向排列，也就是底部有三个可点击的图片+文字控件。

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

    <include
        android:id="@+id/homeLayout"
        layout="@layout/layout_tab_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <include
        android:id="@+id/messageLayout"
        layout="@layout/layout_tab_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <include
        android:id="@+id/mineLayout"
        layout="@layout/layout_tab_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />

</LinearLayout>

里面include引用了共同的布局作为子布局，可以看出子布局就是纵向排列的一个图片+文字

<?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">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">
        <ImageView
            android:id="@+id/tabImg"
            android:layout_width="56px"
            android:layout_height="56px"
            android:layout_centerHorizontal="true" />

        <TextView
            android:id="@+id/tabText"
            android:layout_width="56px"
            android:layout_height="30px"

            android:layout_centerHorizontal="true"
            android:textColor="@color/mainBtmText"
            android:textSize="22px"
            android:gravity="center"
            />
    </RelativeLayout>
</RelativeLayout>

MainViewPaper 中并没有什么重点代码。

package android.coolweather.com.xinguangfirstactivitydemo.fragment;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;

public class MainViewPaper extends ViewPager {

    public MainViewPaper(Context context) {
        super(context);
    }

    public MainViewPaper(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    @Override
    public void setCurrentItem(int item) {
        // TODO Auto-generated method stub
        super.setCurrentItem(item, false);
          }
}

接下来就是mainactivity中的调用,首先是initview中viewpager的使用，其次就是viewpager与底部的联动了1viewpage滑动，底部相应条目被选中。2底部条目点击，viewpager滑动到相应界面的fregment。
1的实现是对viewpager监听，然后当页面停止滑动的时候调用myBottomLayout.setResidAndColor(myViewPager.getCurrentItem())方法即可。
2的实现是我们上面写的回调方法，在onclik总调用myViewPager.setCurrentItem(0)即可。


package com.huazhan.org.main;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.KeyEvent;
import android.widget.Toast;

import com.huazhan.org.R;
import com.huazhan.org.app.BaseActivity;
import com.huazhan.org.main.fragment.HomeFragment;
import com.huazhan.org.main.fragment.MainViewPaper;
import com.huazhan.org.main.fragment.MessageFragment;
import com.huazhan.org.main.fragment.MineFragment;
import com.huazhan.org.main.view.MyBottomLayout;
import com.huazhan.org.util.image.ZoomOutPageTransformer;

import java.util.ArrayList;
import java.util.List;
public class MainActivity extends BaseActivity {
  private long exitTime = 0;
  private MainViewPaper myViewPager;
  private MyBottomLayout myBottomLayout;
  private List<Fragment> fragments;
  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      initView();
      initData();
      setViewClick();
  }

  public void initView() {
      fragments = new ArrayList<>();
      fragments.add(new HomeFragment());
      fragments.add(new MessageFragment());
      fragments.add(new MineFragment());
      myViewPager = (MainViewPaper) findViewById(R.id.myViewPager);
      //设置动画
      myViewPager.setPageTransformer(true, new  ZoomOutPageTransformer());
      myBottomLayout = (MyBottomLayout) findViewById(R.id.myBottomLayout);
  }
//给viewpager设置当前的fregment
  public void initData() {
      myViewPager.setAdapter(new MyFragmentAdapter(getSupportFragmentManager()));
  }

  public void setViewClick() {
      //设值注入，初始化MyBottomLayout页面的回调实例
      myBottomLayout.setOnCallbackListener(new MyCallBackListener());

      //ViewPager页面监听 使用add而不是set
      myViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
          @Override
          public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
          }

          @Override
          public void onPageSelected(int position) {
          }

          @Override
          public void onPageScrollStateChanged(int state) {
              //0是静止，1是正在滑动，2是停止滑动
              if (state == 2) {
                  //设置滑动ViewPager导航同步变化
                  myBottomLayout.setResidAndColor(myViewPager.getCurrentItem());
              }
          }
      });
  }

  /**
   * 实现回调监听方法，用于改变当前item值
   * 在FragmentPagerAdapter的getItem方法中切换Fragment
   */
  private class MyCallBackListener implements MyBottomLayout.ICallbackListener {

      @Override
      public void click(int id) {
          switch (id) {
              case R.id.homeLayout:
                  myViewPager.setCurrentItem(0);
                  break;
              case R.id.messageLayout:
                  myViewPager.setCurrentItem(1);
                  break;
              case R.id.mineLayout:
                  myViewPager.setCurrentItem(2);
                  break;

          }
      }
  }

  /**
   * viewPager的adapter，改变当前fragment
   */
  private class MyFragmentAdapter extends FragmentPagerAdapter {

      private MyFragmentAdapter(FragmentManager fm) {
          super(fm);
      }

      @Override
      public Fragment getItem(int position) {
          return fragments.get(position);
      }

      @Override
      public int getCount() {
          //一共3个页面
          return 3;
      }
  }
  @Override
  public boolean onKeyDown(int keyCode, KeyEvent event) {
      if (keyCode == KeyEvent.KEYCODE_BACK) {
          exit();
          return false;
      }
      return super.onKeyDown(keyCode, event);
  }

  public void exit() {
      if ((System.currentTimeMillis() - exitTime) > 2000) {
          Toast.makeText(getApplicationContext(), "再按一次退出程序",
                  Toast.LENGTH_SHORT).show();
          exitTime = System.currentTimeMillis();
      } else {
          finish();
          System.exit(0);
      }
  }
}

综上，即可简单的实现标题。

viewpager+fregment+layoutbottom的

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读