Android 에서 PagerSlidingTabStrip 을 사용 하여 내 비게 이 션 제목 을 구현 하 는 예제

이 오픈 소스 프레임 워 크 홈 페이지 주소:https://github.com/astuetz/PagerSlidingTabStrip
ViewPager 에 맞 춰 사용 하 는 대화 형 페이지 표시 기 컨트롤 로 이해 할 수 있 습 니 다.
말 이 많 지 않 으 면 먼저 효과 도 를 올 립 니 다.

그 중의 psts Indicator Height 와 psts Underline Height 의 차 이 를 보 여주 기 위해 서로 다른 설정 이 구분 되 었 습 니 다(actionbar 제거 처리).이전 보다 ViewPager 와 ViewPager 와 Fragement 를 단독으로 사용 한 것 을 직관 적 으로 볼 수 있 습 니 다.이번 에는 PagerSlidingTabStrip 의 사용 을 보 여 주 며 페이지 내 비게 이 션 에 상대 적 으로 화려 한 전환 효 과 를 제공 합 니 다.다음은 PagerSlidingTabStrip 의 사용 을 소개 합 니 다.
전기 관련 박문 추천:
Android 에서 Fragment 랑 ViewPager 그 거.
Android 에 서 는 ViewPager 를 사용 하여 화면 페이지 전환 과 페이지 순환 방송 효 과 를 실현 합 니 다.
1.기본 속성 소개

apstsIndicatorColor //Color of the sliding indicator  슬라이더 색상

pstsUnderlineColor //Color of the full-width line onthe bottom of the view  슬라이더 가 있 는 그 전폭 선의 색깔

pstsDividerColor //Color of the dividers betweentabs   각 탭 의 분할 선 색상

pstsIndicatorHeight //Height of the sliding indicator      슬라이더 높이

pstsUnderlineHeight //Height of the full-width line onthe bottom of the view    슬라이더 가 있 는 그 전폭 선의 높이

pstsDividerPadding //Top and bottom padding of thedividers   분할 선 밑부분 과 상단 의 충전 너비

pstsTabPaddingLeftRight //Left and right padding of eachtab   탭 마다 좌우 로 폭 채 우기

pstsScrollOffset //Scroll offset of the selectedtab

pstsTabBackground //Background drawable of each tab,should be a StateListDrawable  모든 탭 의 배경 은 StateList Drawable 일 것 입 니 다. 

pstsShouldExpand //If set to true, each tab isgiven the same weight, default false   트 루 로 설정 하면 탭 마다 같은 컨트롤 이 고 전체 화면 을 고 르 게 나 누 며 기본 값 은 false

입 니 다.

pstsTextAllCaps //If true, all tab titles will beupper case, default true   트 루 라면 모든 태그 가 대문자 이 고 기본 값 은 트 루

입 니 다.
모든 속성 은 그들 만 의 getter 와 setter 방법 으로 수시로 바 꿉 니 다.

2.이번 프레젠테이션 의 코드 구조

3.ActionBar 제거 설정
res/values/styles.xml 에 설정

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

 전체 xml 파일 은 다음 과 같 습 니 다.

<resources>
  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
  </style>
</resources>

4.가이드 의존 팩
AndroidStudio 2.2 를 사용 합 니 다.build.gradle 에서 dependencies 에서 다음 코드 를 직접 추가 합 니 다.
 compile 'com.astuetz:pagerslidingtabstrip:1.0.1'

5.레이아웃 레이아웃 파일
레이아웃 전에 색상 에 대한 참조 설정 을 했 습 니 다.res/values/colors.xml 파일 은 다음 과 같 습 니 다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="colorPrimary">#3F51B5</color>
  <color name="colorPrimaryDark">#303F9F</color>
  <color name="colorAccent">#FF4081</color>

  <color name="color_theme">#489cfa</color>
  <color name="transparent">#00000000</color>
  <color name="yellow">#fc9630</color>
</resources>

(1)주 레이아웃 파일 activitymain.xml
PagerSlidingTabStrip 은 ViewPager 와 함께 사용 합 니 다.이번 에는 ViewPager 를 PagerSlidingTabStrip 아래 에 놓 습 니 다.구체 적 인 레이아웃 파일 은 다음 과 같 습 니 다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.mly.panhouye.pagerslidingtabstripdemo.MainActivity">
  <com.astuetz.PagerSlidingTabStrip
    android:id="@+id/pst"
    android:layout_width="match_parent"
    android:layout_height="48dip"
    android:background="@color/color_theme"
    app:pstsShouldExpand="true"
    app:pstsTabBackground="@color/transparent"
    app:pstsIndicatorHeight="5dp"
    app:pstsIndicatorColor="@color/yellow"
    app:pstsTextAllCaps="false"
    app:pstsUnderlineHeight="15dp"
  />
  <android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/pst"/>
</RelativeLayout>

(2)대응 하 는 Fragment 레이아웃 파일
이번 에는 간단 한 효과 만 보 여 줍 니 다.fragmentpan, fragment_hou, fragment_ye 각 레이아웃 파일 은 텍스트 만 다 릅 니 다.이 곳 은 fragment 하나만 보 여 줍 니 다.pan.xml:

<?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">
  <TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text=" "
    android:textSize="100sp"
    />
</LinearLayout>

(3)각 fragment 는 대응 하 는 fragment 류 를 채 우 고 ragment 를 보 여 줍 니 다.pan.xml 레이아웃 에 대응 하 는 fragmen 클래스 HouFragment.java:
package com.mly.panhouye.pagerslidingtabstripdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
 * Created by panchengjia on 2017/1/15 0015.
 */
public class HouFragment extends Fragment {
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view =inflater.inflate(R.layout.fragment_hou,null);
    return view;
  }
}

6.자바 구현 코드

package com.mly.panhouye.pagerslidingtabstripdemo;

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.support.v7.app.AppCompatActivity;
import com.astuetz.PagerSlidingTabStrip;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
  PagerSlidingTabStrip pst;
  ViewPager viewPager;
  ArrayList<Fragment> fragments;
  //  pst   
  String[] titles = {" "," "," "};
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    pst= (PagerSlidingTabStrip) findViewById(R.id.pst);
    viewPager= (ViewPager) findViewById(R.id.pager);

    fragments = new ArrayList<>();
    HouFragment houFragment = new HouFragment();
    PanFragment panFragment = new PanFragment();
    YeFragment yeFragment = new YeFragment();
    //  fragment         
    fragments.add(panFragment);
    fragments.add(houFragment);
    fragments.add(yeFragment);
    FragmentManager fragmentManager = getSupportFragmentManager();
    viewPager.setAdapter(new MyPagerAdapter(fragmentManager,titles,fragments));
    viewPager.setCurrentItem(0);
    // ViewPager onPagerChangeListener   ，PagerSlidingTabStrip       
    //          PagerSlidingTabStrip.setViewPager()   ，         
    pst.setViewPager(viewPager);
    pst.setTextSize(30);
  }

  /**
   *       
   */
  class MyPagerAdapter extends FragmentPagerAdapter {
    private String[] titles;
    ArrayList<Fragment> fragments;
    //          ，      
    public MyPagerAdapter(FragmentManager fm, String[] titles, ArrayList<Fragment> fragments) {
      super(fm);
      this.titles = titles;
      this.fragments = fragments;
    }
    //       
    @Override
    public CharSequence getPageTitle(int position) {
      return titles[position];
    }
    //        fragment
    @Override
    public Fragment getItem(int position) {
      return fragments.get(position);
    }
    //fragment   
    @Override
    public int getCount() {
      return fragments.size();
    }
  }
}

이번 에는 PagerSlidingTabStrip 의 가장 기본 적 인 사용 방법 만 보 여 줍 니 다.이 를 통 해 더욱 화려 한 전환 효 과 를 낼 수 있 습 니 다.하 세 요.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.