viewpager+fragment三页面tab切换并且实现同时上传三个页面的信息

Posted 2020-09-19

一：代码：首先是主页面：

package com.example.admin.myviewpager;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    //图片
    private TextView pictureTextView;
    //电影
    private TextView movieTextView;
    //音乐
    private TextView musicTextView;

    private Button btn;

    private ViewPager mViewPager;

    private ImageView cursor;

    private int offset = 0;
    private int position_one;
    private int position_two;

    private int bmpW;

    private int currIndex = 0;

    private ArrayList<Fragment> fragmentslist;

    //管理Fragment
    private FragmentManager fragmentManager;

    public Context context;

    public ArrayList<String> s;

    public HashMap<String, String> map;

    public static final String TAG = "MainActivityTags";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        s = new ArrayList<>();
        map = new HashMap<>();

        initTextView();
        
        initImageView();
        
        initFragment();
        
        initViewPager();
    }

    private void initViewPager() {
        mViewPager = (ViewPager) findViewById(R.id.vPager);
        mViewPager.setAdapter(new MFragmentPagerAdapter(fragmentManager, fragmentslist));

        mViewPager.setOffscreenPageLimit(2);
        mViewPager.setCurrentItem(0);

        mViewPager.addOnPageChangeListener(new MyOnPageChangeListener());
    }

    private void initFragment() {
        fragmentslist = new ArrayList<Fragment>();
        fragmentslist.add(new MsgFragment());
        fragmentslist.add(new Msg2Fragment());
        fragmentslist.add(new Msg3Fragment());

        fragmentManager = getSupportFragmentManager();
    }

    private void initImageView() {
        cursor = (ImageView) findViewById(R.id.cursor);
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);

        // 获取分辨率宽度
        int screenW = dm.widthPixels;

        bmpW = (screenW/3);

        //设置动画图片宽度
        setBmpW(cursor, bmpW);
        offset = 0;

        //动画图片偏移量赋值
        position_one = (int) (screenW / 3.0);
        position_two = position_one * 2;
    }

    /**
     * 设置动画图片宽度
     * @param mWidth
     */
    private void setBmpW(ImageView imageView,int mWidth){
        ViewGroup.LayoutParams para;
        para = imageView.getLayoutParams();
        para.width = mWidth;
        imageView.setLayoutParams(para);
    }

    private void initTextView() {
        //图片头标
        pictureTextView = (TextView)findViewById(R.id.picture_text);
        //电影头标
        movieTextView = (TextView) findViewById(R.id.movie_text);
        //音乐头标
        musicTextView = (TextView)findViewById(R.id.music_text);

        btn = (Button) findViewById(R.id.btn);

        //添加点击事件
        pictureTextView.setOnClickListener(new MyOnClickListener(0));
        movieTextView.setOnClickListener(new MyOnClickListener(1));
        musicTextView.setOnClickListener(new MyOnClickListener(2));
        btn.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (v.getId() == R.id.btn){
            Toast.makeText(this, s.toString(), Toast.LENGTH_LONG).show();

            for (Map.Entry<String, String> entry : map.entrySet()){
                Log.i(TAG, "Key = " + entry.getKey() + ", Value = " + entry.getValue());
            }
        }
    }

    public class MyOnClickListener implements View.OnClickListener{
        private int index = 0 ;
        public MyOnClickListener(int i) {
            index = i;
        }

        @Override
        public void onClick(View v) {
            mViewPager.setCurrentItem(index);
        }
    }

    public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            Animation animation = null;

            switch (position){
                case 0:
                    if (currIndex == 1){
                        animation = new TranslateAnimation(position_one, 0, 0, 0);
                        pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
                    } else if (currIndex == 2){
                        animation = new TranslateAnimation(position_two, 0, 0, 0);
                        pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
                    }
                    break;

                case 1:
                    //从页卡1跳转转到页卡2
                    if (currIndex == 0) {
                        animation = new TranslateAnimation(offset, position_one, 0, 0);
                        movieTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
                    } else if (currIndex == 2) { //从页卡1跳转转到页卡2
                        animation = new TranslateAnimation(position_two, position_one, 0, 0);
                        movieTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
                    }
                    break;
                //当前为页卡3
                case 2:
                    //从页卡1跳转转到页卡2
                    if (currIndex == 0) {
                        animation = new TranslateAnimation(offset, position_two, 0, 0);
                        musicTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
                    } else if (currIndex == 1) {//从页卡1跳转转到页卡2
                        animation = new TranslateAnimation(position_one, position_two, 0, 0);
                        musicTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
                    }
                    break;
            }

            currIndex = position;

            if (animation != null) {
                animation.setFillAfter(true);// true:图片停在动画结束位置
                animation.setDuration(100);
                cursor.startAnimation(animation);
            }
        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }
}

二：主页面layout：

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"
            android:layout_height="20dp"
            android:layout_weight="1"
            android:text=""/>
        <Button
            android:id="@+id/btn"
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:text="点击"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="@dimen/top_tab_height"
        android:background="@color/main_top_color" >

        <TextView
            android:id="@+id/picture_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="@string/picture"
            android:textStyle="bold"
            android:textColor="@color/main_top_tab_color"
            android:textSize="@dimen/main_top_tab_text_size" />

        <TextView
            android:id="@+id/movie_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="@string/movie"
            android:textStyle="bold"
            android:textColor="@color/main_top_tab_color"
            android:textSize="@dimen/main_top_tab_text_size" />

        <TextView
            android:id="@+id/music_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="@string/music"
            android:textStyle="bold"
            android:textColor="@color/main_top_tab_color"
            android:textSize="@dimen/main_top_tab_text_size" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/main_line_height"
        android:layout_gravity="bottom"
        android:orientation="vertical"
        android:background="@color/main_top_color"
        >

        <ImageView
            android:id="@+id/cursor"
            android:layout_width="@dimen/main_matrix_width"
            android:layout_height="@dimen/main_line_height"
            android:scaleType="matrix"
            android:src="@color/matrix_color" />
    </LinearLayout>
    <View
        android:layout_width="fill_parent"
        android:layout_height="0.5dp"
        android:background="@color/main_top_color"/>


    <android.support.v4.view.ViewPager
        android:id="@+id/vPager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1.0"
        android:background="@color/white"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" />
</LinearLayout>
三：ViewPager需要实现自己的FragmentPagerAdapter

package com.example.admin.myviewpager;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;

/**
 * Created by Zzz on 2017-5-25.
 */

public class MFragmentPagerAdapter extends FragmentPagerAdapter{
    private ArrayList<Fragment> fragmentsList;
    public MFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragmentsList) {
        super(fm);
        this.fragmentsList = fragmentsList;
    }

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

    @Override
    public int getCount() {
        return fragmentsList.size();
    }
}

四：三个自己实现的Fragment

package com.example.admin.myviewpager;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.LinearLayout;

/**
 * Created by Zzz on 2017-5-25.
 */

public class MsgFragment extends Fragment {
    LinearLayout content_layout;
    MainActivity parent;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.layout_frg, container, false);
        parent = (MainActivity) getActivity();

        for (int i = 0; i < 10; ++i) {
            content_layout = (LinearLayout) view.findViewById(R.id.content_layout);
            View v = View.inflate(getActivity(), R.layout.layout_item, null);
            EditText type_tv = (EditText) v.findViewById(R.id.type_tv);
            final int finalI = i;
            type_tv.addTextChangedListener(new TextWatcher() {

                @Override
                public void onTextChanged(CharSequence s, int start,
                                          int before, int count) {
                    parent.map.put("MsgFragment" + finalI, s.toString());
                }

                @Override
                public void beforeTextChanged(CharSequence s, int start,
                                              int count, int after) {

                }

                @Override
                public void afterTextChanged(Editable s) {

                }
            });
            content_layout.addView(v);
        }
        return view;
    }
}

五：Fragment需要的布局：
1.layout_frg

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

    <com.example.admin.myviewpager.MyScrollView
        android:id="@+id/scroll_sv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fadingEdge="none" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <LinearLayout
                android:id="@+id/content_layout"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#ffffffff"
                android:layout_marginBottom="16dp"
                android:orientation="vertical" >
            </LinearLayout>

        </LinearLayout>
    </com.example.admin.myviewpager.MyScrollView>
</LinearLayout>

2.layout_item

<?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="wrap_content"
    android:background="#ffffff"
    android:orientation="vertical">

    <View
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:visibility="gone"
        android:background="#f5f5f5"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:layout_marginLeft="13dp"
        android:layout_marginRight="13dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/value_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#333333"
            android:text="第一项"
            android:textSize="16dp"/>

        <TextView
            android:id="@+id/must_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:text="*"
            android:textColor="#f05050"
            android:textSize="13dp"
            />

        <EditText
            android:id="@+id/type_tv"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="13dp"
            android:layout_marginRight="13dp"
            android:layout_weight="1"
            android:background="@null"
            android:gravity="right"
            android:hint="请输入"
            android:imeOptions="actionNext"
            android:inputType="text"
            android:maxLines="1"
            android:textColor="#999999"
            android:textColorHint="#bbbbbb"
            android:textSize="14sp"/>

        <ImageView
            android:id="@+id/more_iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:src="@drawable/icon_more"
            android:visibility="invisible"/>
    </LinearLayout>

    <View
        android:layout_width="fill_parent"
        android:layout_height="1px"
        android:layout_marginLeft="13dp"
        android:background="#e0e0e0" />
</LinearLayout>

六：工具类：需要用到的用于滑动展示不全的页面ScrollView：

package com.example.admin.myviewpager;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;

/**
 * 键盘浮出，scrollview滑动事件监听
 * @author 蝶殤待月
 *
 */
public class MyScrollView extends ScrollView {
   
   private ScrollViewListener listener;

   public void setScrollViewListener(ScrollViewListener listener) {
      this.listener = listener;
   }
   
   public boolean isShow = false;

   public void setShow(boolean isShow) {
      this.isShow = isShow;
   }

   public MyScrollView(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
   }

   public MyScrollView(Context context, AttributeSet attrs) {
      super(context, attrs);
   }

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

   
   @Override
   public boolean onTouchEvent(MotionEvent ev) {
      if (ev.getAction() == MotionEvent.ACTION_MOVE ||
            ev.getAction() == MotionEvent.ACTION_SCROLL) {
         if (isShow) {
            if (listener != null) {
               listener.onScrollChanged();
               return true;
            }
         }
      }
      return super.onTouchEvent(ev);
   }
   
   
   @Override
   protected void onScrollChanged(int l, int t, int oldl, int oldt) {
      if (listener != null) {
         listener.onScrollChanged(l, t, oldl, oldt);
      }
      super.onScrollChanged(l, t, oldl, oldt);
   }
   
   public interface ScrollViewListener {

      public void onScrollChanged();
      public void onScrollChanged(int x, int y, int oldx, int oldy);
   }
}
七：以上既可实现，同时保存三个页面的信息：

1、主页面要初始化一个public的map，用于给Fragment保存信息，public HashMap<String, String> map;
2、Fragment获取到主页面的activity属性。

MainActivity parent =

(MainActivity) getActivity();
3、在需要保存信息的地方直接存储既可：

parent.map.put("MsgFragment" + finalI, s.toString());