ViewPager+Fragment

来源：互联网发布：.com.hk域名注册编辑：程序博客网时间：2024/05/21 07:13

ViewPager+Fragment （带滑块）

public class ExampleActivity extends FragmentActivity implements ViewPager.OnPageChangeListener, View.OnClickListener {    /**     * viewpager     */    private ViewPager mPageVp;    /**     * Tab显示内容TextView     */    private TextView firstTv, secondTv, thirdTv, fourthTv;    /**     * Tab的那个引导线     */    private ImageView mTabLineIv;    /**     * ViewPager的当前选中页     */    private int currentIndex;    /**     * Fragment     */    private SearchExhibitionFragment firstFragment;    private SearchCampaignFragment secondFragment;    private SearchArtWorkFragment thirdFragment;    private SearchArtistFragment searchArtistFragment;    private List<Fragment> mFragmentList = new ArrayList<Fragment>();    private CommonFragmentAdapter mFragmentAdapter;    private int screenWidth;//屏幕的宽度    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        ButterKnife.bind(this);        initView();        initListener();        initFragment();    }    protected void initFragment() {        firstFragment = new SearchExhibitionFragment();        secondFragment = new SearchCampaignFragment();        thirdFragment = new SearchArtWorkFragment();        searchArtistFragment = new SearchArtistFragment();        mFragmentList.add(firstFragment);        mFragmentList.add(secondFragment);        mFragmentList.add(thirdFragment);        mFragmentList.add(searchArtistFragment);        mFragmentAdapter = new CommonFragmentAdapter(getSupportFragmentManager(), mFragmentList);        mPageVp.setAdapter(mFragmentAdapter);        mPageVp.setCurrentItem(0);    }    protected void initListener() {        mPageVp.setOnPageChangeListener(this);        firstTv.setOnClickListener(this);        secondTv.setOnClickListener(this);        thirdTv.setOnClickListener(this);        fourthTv.setOnClickListener(this);    }    protected void initView() {        setContentView(R.layout.activity_example);        firstTv = (TextView) findViewById(R.id.common_first_tv);        secondTv = (TextView) findViewById(R.id.common_second_tv);        thirdTv = (TextView) findViewById(R.id.common_third_tv);        fourthTv = (TextView) findViewById(R.id.common_fourth_tv);        mTabLineIv = (ImageView) findViewById(R.id.common_tab_line_iv);        mPageVp = (ViewPager) findViewById(R.id.page_vp);        setTitleText();        initTabLineWidth();    }    private void setTitleText() {        firstTv.setText(R.string.home_exhibition);        secondTv.setText(R.string.home_campaign);        thirdTv.setText(R.string.home_art);        fourthTv.setText(R.string.home_artist);    }    /**     * state滑动中的状态 有三种状态（0，1，2） 1：正在滑动 2：滑动完毕 0：什么都没做。     */    @Override    public void onPageScrollStateChanged(int state) {    }    /**     * position :当前页面，及你点击滑动的页面 offset:当前页面偏移的百分比     * offsetPixels:当前页面偏移的像素位置     */    @Override    public void onPageScrolled(int position, float offset,                               int offsetPixels) {        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv                .getLayoutParams();        LogUtil.e("offset:", offset + "");        if (currentIndex == 0 && position == 0)// 0->1        {            lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex                    * (screenWidth / 4));        } else if (currentIndex == 1 && position == 0) // 1->0        {            lp.leftMargin = (int) (-(1 - offset)                    * (screenWidth * 1.0 / 4) + currentIndex                    * (screenWidth / 4));        } else if (currentIndex == 1 && position == 1) // 1->2        {            lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 4) + currentIndex                    * (screenWidth / 4));        } else if (currentIndex == 2 && position == 1) // 2->1        {            lp.leftMargin = (int) (-(1 - offset)                    * (screenWidth * 1.0 / 4) + currentIndex                    * (screenWidth / 4));        } else if (currentIndex == 2 && position == 2) { //2--3            lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex                    * (screenWidth / 4));        } else if (currentIndex == 3 && position == 2) { //3--2            lp.leftMargin = (int) (-(1 - offset)                    * (screenWidth * 1.0 / 4) + currentIndex                    * (screenWidth / 4));        }        mTabLineIv.setLayoutParams(lp);    }    @Override    public void onPageSelected(int position) {        resetTextView();        switch (position) {            case 0:                firstTv.setTextColor(getResources().getColor(R.color._212120));                break;            case 1:                secondTv.setTextColor(getResources().getColor(R.color._212120));            case 2:                thirdTv.setTextColor(getResources().getColor(R.color._212120));                break;            case 3:                fourthTv.setTextColor(getResources().getColor(R.color._212120));                break;        }        currentIndex = position;    }    /**     * 设置滑动条的宽度为屏幕的1/4(根据Tab的个数而定)     */    private void initTabLineWidth() {        DisplayMetrics dpMetrics = new DisplayMetrics();        getWindow().getWindowManager().getDefaultDisplay()                .getMetrics(dpMetrics);        screenWidth = dpMetrics.widthPixels;        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv                .getLayoutParams();        lp.width = screenWidth / 4;        mTabLineIv.setLayoutParams(lp);    }    /**     * 重置颜色     */    private void resetTextView() {        firstTv.setTextColor(getResources().getColor(R.color._66));        secondTv.setTextColor(getResources().getColor(R.color._66));        thirdTv.setTextColor(getResources().getColor(R.color._66));        fourthTv.setTextColor(getResources().getColor(R.color._66));    }    /**     * Tab点击事件     *     * @param view     */    @Override    public void onClick(View view) {        switch (view.getId()) {            case R.id.common_first_tv:                mPageVp.setCurrentItem(0);                break;            case R.id.common_second_tv:                mPageVp.setCurrentItem(1);                break;            case R.id.common_third_tv:                mPageVp.setCurrentItem(2);                break;            case R.id.common_fourth_tv:                mPageVp.setCurrentItem(3);                break;        }    }}

Fragment只列一个出来

public class SearchArtistFragment extends Fragment  {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_search_artist, container, false);        return view;    }}

activity 布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/background">    <LinearLayout        android:id="@+id/id_switch_tab_ll"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:baselineAligned="false">        <LinearLayout            android:id="@+id/first_llyt"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:orientation="horizontal"            android:padding="10dip" >            <TextView                android:id="@+id/common_first_tv"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:gravity="center"                android:text="1111"                android:textColor="@color/_212120"                android:textSize="15dip" />        </LinearLayout>        <LinearLayout            android:id="@+id/second_llyt"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:clickable="true"            android:gravity="center"            android:orientation="horizontal"            android:padding="10dip"            android:saveEnabled="false" >            <TextView                android:id="@+id/common_second_tv"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:gravity="center"                android:textColor="@color/_66"                android:text="2222"                android:textSize="15dip" />        </LinearLayout>        <LinearLayout            android:id="@+id/third_llyt"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:focusable="false"            android:gravity="center"            android:orientation="horizontal"            android:padding="10dip" >            <TextView                android:id="@+id/common_third_tv"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:gravity="center"                android:text="33333"                android:textColor="@color/_66"                android:textSize="15dip" />        </LinearLayout>        <LinearLayout            android:id="@+id/fourth_llyt"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:focusable="false"            android:gravity="center"            android:orientation="horizontal"            android:padding="10dip" >            <TextView                android:id="@+id/common_fourth_tv"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:gravity="center"                android:textColor="@color/_66"                android:text="44444"                android:textSize="15dip" />        </LinearLayout>    </LinearLayout>    <ImageView        android:id="@+id/common_tab_line_iv"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:src="@mipmap/example_tab"        android:contentDescription="tab">    </ImageView>    <View        android:layout_width="match_parent"        android:layout_height="0.5dp"        android:background="#000000" />    <android.support.v4.view.ViewPager        android:id="@+id/page_vp"        android:layout_width="wrap_content"        android:layout_height="wrap_content">    </android.support.v4.view.ViewPager></LinearLayout>

0 0