Einführung

Als ich das Tutorial beim ersten Start der App anzeigen wollte, suchte ich nach etwas, das intuitiv bedient und verstanden werden konnte, und stieß auf etwas mit dem Namen ** "View Pager" **.

Es scheint, dass Sie so etwas leicht erstellen können, indem Sie die Bibliothek einfügen, aber es kann unpraktisch sein, wenn Sie sie anpassen. Deshalb habe ich versucht, sie selbst zu erstellen, obwohl ich ein Amateur war.

Vorbereitung

** "View Pager" ** wird von ** API 22 ** verwendet, also machen Sie CompileSdkVersion ** 22 ** oder höher. Wir möchten dieses Mal auch ** Indicator ** anzeigen, daher werden wir die design support library vorstellen.

`app.build`


apply plugin: 'com.android.application'

android {
  compileSdkVersion 26
  buildToolsVersion "26.0.1"
  defaultConfig {
    ...
  }
  buildTypes {
    release {
      ...
    }
    debug {
      ...
    }
  }
}

dependencies {
  compile fileTree(include: ['*.jar'], dir: 'libs')
  compile 'com.android.support:appcompat-v7:26.0.0-alpha1'
  compile 'com.android.support:support-v4:26.0.0-alpha1'
  compile 'com.android.support:design:26.0.0-alpha1'
}

Machen Sie eine Grundlage

** "View Pager" ** hat mehrere * Fragmente * auf der Basis und wird verschoben, um sie nach Benutzerbedienung nacheinander anzuzeigen.

Also, diesmal, wenn Sie ** ViewPager ** und ** Indicator ** auf einer Basis platzieren * Aktivität * und Biss * Adapter *, der das * Fragment * so umschaltet, dass es entsprechend der aktuellen * Position * angezeigt wird. Ich denke es ist gut.

Jetzt erstellen wir tatsächlich die Basis * Aktivität *.

`MainActivity.java`


public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener, View.OnClickListener {
  private final static int PAGE_NUM = 3;
  private ViewPager viewPager;
  private TextView textLeft;
  private TextView textRight;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    viewPager = (ViewPager) findViewById(R.id.pager);
    PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());  //Benutzerdefinierter Adapter
    viewPager.setAdapter(adapter);
    viewPager.addOnPageChangeListener(this);  //Listener nach Seitenübergang hinzugefügt

    TabLayout tabLayout = (TabLayout) findViewById(R.id.indicator);
    tabLayout.setupWithViewPager(viewPager, true);

    textLeft = (TextView) findViewById(R.id.text_left);
    textLeft.setOnClickListener(this);  //Fusszeile(links)Hinzufügen Klicken Sie auf Listener
    textRight = (TextView) findViewById(R.id.text_right);
    textRight.setOnClickListener(this);  //Fusszeile(richtig)Hinzufügen Klicken Sie auf Listener
  }

  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  }

  @Override
  public void onPageSelected(int position) {  //Fußzeilentext wechseln
    if (position == 0) {
      textLeft.setText("Skip");
    } else {
      textLeft.setText("Back");
    }

    if (position == (PAGE_NUM - 1)) {
      textRight.setText("Go!");
    } else {
      textRight.setText("Next");
    }
  }

  @Override
  public void onPageScrollStateChanged(int state) {
  }

  @Override
  public void onClick(View view) {  //Verhalten beim Klicken auf Fußzeilentext
    switch (view.getId()) {
      case R.id.text_left:
        if (viewPager.getCurrentItem() != 0) {  //Wenn es nicht die erste Seite ist, gehen Sie eine zurück
          viewPager.setCurrentItem(viewPager.getCurrentItem() - 1, true);
        }
        break;
      case R.id.text_right:
        if (viewPager.getCurrentItem() != PAGE_NUM) {  //Wenn es nicht die letzte Seite ist, fahren Sie mit einem Blatt fort
          viewPager.setCurrentItem(viewPager.getCurrentItem() + 1, true);
        }
        break;
    }
  }

  private class PagerAdapter extends FragmentPagerAdapter {  //Benutzerdefinierter Adapter
    PagerAdapter(FragmentManager manager) {
      super(manager);
    }

    @Override
    public Fragment getItem(int position) {
      switch (position) {  //Schalten Sie das angezeigte Fragment entsprechend der aktuellen Position
        case 0:
          return new FirstFragment();
        case 1:
          return new SecondFragment();
        case 2:
          return new ThirdFragment();
      }
      return null;
    }

    @Override
    public int getCount() {
      return PAGE_NUM;
    }
  }
}

Erstellen Sie als Nächstes eine Ansicht.

`activity_main.xml`


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

  <android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/footer"/>

  <RelativeLayout
    android:id="@+id/footer"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_alignParentBottom="true"
    android:background="#3F51B5">

    <TextView
      android:id="@+id/text_left"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentStart="true"
      android:layout_centerVertical="true"
      android:layout_marginStart="30dp"
      android:padding="15dp"
      android:text="Skip"
      android:textColor="#FFFFFF"
      android:textSize="18sp"/>

    <android.support.design.widget.TabLayout
      android:id="@+id/indicator"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      app:tabBackground="@drawable/indicator_selector"
      app:tabGravity="center"
      app:tabIndicatorHeight="0dp"/>

    <TextView
      android:id="@+id/text_right"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentEnd="true"
      android:layout_centerVertical="true"
      android:layout_marginEnd="30dp"
      android:padding="15dp"
      android:text="Next"
      android:textColor="#FFFFFF"
      android:textSize="18sp"/>

  </RelativeLayout>

</RelativeLayout>

Dieses Mal wird ** TabLayout ** der Design Support Library verwendet, um ** Indicator ** anzuzeigen. Außerdem wird ** Indikator ** durch Angabe von app: tabBackground =" @ drawable / indic_selector " implementiert. Unten ist der * Selektor *.

`indicator_selector.xml`


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_selected="true">
    <shape
      android:innerRadius="0dp"
      android:shape="ring"
      android:thickness="4dp"
      android:useLevel="false">
      <solid android:color="#DEDCDB"/>
    </shape>
  </item>
  <item>
    <shape
      android:innerRadius="0dp"
      android:shape="ring"
      android:thickness="2dp"
      android:useLevel="false">
      <solid android:color="#A59E99"/>
    </shape>
  </item>
</selector>

Erstellen Sie eine Seite zum Anzeigen

Alles was Sie tun müssen, ist Ihre Lieblingsseite zu erstellen, ** Fragment **! Also werde ich es hier weglassen ...

Am Ende

Dieses Mal habe ich es selbst gemacht, ohne eine zusätzliche Bibliothek einzuführen, aber die Welt ist praktisch, und wenn Sie danach suchen, gibt es viele solche Dinge (lacht). Wenn Sie immer noch nicht die finden, die Ihnen gefällt, beziehen Sie sich bitte darauf I würde es schätzen wenn du könntest.

Das nächste Mal möchte ich es mit einem reicheren Gefühl beenden ⊂ ((・ ⊥ ・)) ⊃ ・ Disparitätseffekt ·Animation · Input-Output Wo Sie diesen Bereich herausfordern wollen!

[JAVA] [Android] Ich möchte einen ViewPager erstellen, der für Tutorials verwendet werden kann

Einführung

Vorbereitung

app.build