Как сделать пошаговое руководство (введение) экраны приложения?

Я хочу добавить экраны введения в мое приложение. он должен скользить от одной страницы к другой. Я хочу добавить 3 экрана. как экран следующим образом:

Есть 3 точки внизу. Я хочу их реализовать. Кроме того, как он скользит к следующей странице, это изменения цвета, а также изменения положения в средней точке.

Я нашел одну библиотеку, которая служит структурой по умолчанию для этого. В том, что они дали точки в нижней части экрана и пропустить слева и сделать справа.

https://github.com/PaoloRotolo/AppIntro .

Это библиотека, которую я искал. Могу ли я реализовать это как мою потребность?

Но я хочу макет, как изображение, которое я показал здесь. Как этого достичь?

Введите описание изображения здесь

Теперь я создал макет :

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    android_orientation="vertical" android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_background="@drawable/bg"
    android_weightSum="1">

    <ImageView
        android_layout_width="180dp"
        android_layout_height="50dp"
        android_id="@+id/imageView9"
        android_layout_gravity="center_horizontal"
        android_background="@drawable/logo_g"
        android_layout_marginTop="20dp"
        android_layout_alignParentTop="true"
        android_layout_centerHorizontal="true" />

    <ImageView
        android_layout_width="200dp"
        android_layout_height="160dp"
        android_id="@+id/imageView10"
        android_layout_gravity="center"
        android_layout_centerHorizontal="true"
        android_layout_below="@+id/imageView9"
        android_layout_marginTop="30dp" />

    <TextView
        android_layout_width="220dp"
        android_layout_height="wrap_content"
        android_textAppearance="?android:attr/textAppearanceMedium"
        android_text="@string/walkthrough1"
        android_id="@+id/textView3"
        android_layout_gravity="center_horizontal"
        android_layout_marginTop="10dp"
        android_textAlignment="center"
        android_textStyle="bold"
        android_layout_below="@+id/imageView10"
        android_layout_centerHorizontal="true"
        android_textColor="@android:color/black" />

    <LinearLayout
        android_orientation="horizontal"
        android_layout_width="match_parent"
        android_layout_height="30dp"
        android_layout_marginTop="10dp"
        android_layout_marginBottom="10dp"
        android_layout_below="@+id/textView3"
        android_id="@+id/linearLayout8"
        android_layout_alignLeft="@+id/button2"
        android_layout_alignStart="@+id/button2"
        android_layout_alignRight="@+id/button2"
        android_layout_alignEnd="@+id/button2">

        <View
            android_layout_width="20dp"
            android_layout_height="20dp"
            android_background="@drawable/circle"></View>

    </LinearLayout>

    <Button
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_text="SIGN UP"
        android_id="@+id/button2"
        android_background="#66BB6A"
        android_textColor="@android:color/white"
        android_layout_below="@+id/linearLayout8"
        android_layout_centerHorizontal="true"
        android_layout_marginLeft="30dp"
        android_layout_marginRight="30dp" />

    <TextView
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_textAppearance="?android:attr/textAppearanceMedium"
        android_text="SKIP"
        android_id="@+id/textView4"
        android_layout_alignParentBottom="true"
        android_layout_centerHorizontal="true"
        android_layout_marginBottom="10dp"
        android_textColor="@android:color/black" />

</RelativeLayout>

Я думал добавить 3 вида окружности в положении точек и изменить его цвет, когда он скользит к следующим страницам. Но я не уверен, как я могу получить представление точки, как это и как я могу скользить от страницы к странице.

Может кто-нибудь помочь с этим, пожалуйста? спасибо..

2 ответа

  1. попробуйте этот код:
    actvity_startup.XML:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 
     android_id="@+id/gallery_paging"
     android_layout_width="fill_parent"
     android_layout_height="fill_parent"
     android_background="#000000"
     android_orientation="vertical" >
     <include layout="@layout/toolbar" />
     <Gallery
        android_id="@+id/mygallery01"
        android_layout_width="fill_parent"
        android_layout_below="@+id/my_awesome_toolbar"
        android_layout_height="fill_parent"/>
       <LinearLayout
        android_id="@+id/image_count"
        android_layout_width="fill_parent"
        android_layout_height="wrap_content"
        android_layout_alignParentBottom="true"
        android_orientation="horizontal"
        android_gravity="center" >
        </LinearLayout>
        <Button
        android_id="@+id/done"
        android_layout_width="250dp"
        android_layout_height="wrap_content"
        android_layout_above="@+id/image_count"
        android_layout_centerHorizontal="true"
        android_layout_marginBottom="18dp"
        android_background="#e74c3c"
        android_textColor="@color/white"
        android_textSize="25sp"
        android_textStyle="bold"
        android_text="Let's Start" />
    </RelativeLayout>
    

    запуск.класс:

    package com.osomebuzz.meme_creator;
    
     import com.osomebuzz.meme_creator.adapter.IamgeAdapter;
     import android.content.Intent;
     import android.graphics.Typeface;
     import android.os.Bundle;
     import android.support.v7.app.AppCompatActivity;
      import android.support.v7.widget.Toolbar;
     import android.view.View;
     import android.view.View.OnClickListener;
     import android.widget.AdapterView;
     import android.widget.AdapterView.OnItemSelectedListener;
     import android.widget.Button;
     import android.widget.Gallery;
     import android.widget.LinearLayout;
     import android.widget.TextView;
    
     @SuppressWarnings("deprecation")
     public class StartUp extends AppCompatActivity {
     Gallery gallery;
        IamgeAdapter imageAdapter;
        LinearLayout count_layout;
        int count = 0;
        static TextView page_text[];
        TextView toolbartitle;
      @Override
      protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_startup);
    
    
        count_layout = (LinearLayout) findViewById(R.id.image_count);
        gallery = (Gallery) findViewById(R.id.mygallery01);
        Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
        toolbartitle = (TextView) findViewById(R.id.titletool);
        toolbartitle.setText("Make Funny Photos");
        //getSupportActionBar().setTitle("Make Funny Photos");
        setSupportActionBar(toolbar);
        final Button done = (Button) findViewById(R.id.done);
    
        done.setOnClickListener(new OnClickListener() {
    
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                Intent next = new Intent(getApplicationContext(),   
    
          MainActivity.class);
                startActivity(next);
                finish();
            }
        });
        imageAdapter = new IamgeAdapter(this);
        gallery.setAdapter(imageAdapter);
        count=gallery.getAdapter().getCount();
        page_text = new TextView[count];
        for (int i = 0; i < count; i++) {
            page_text[i] = new TextView(this);
            page_text[i].setText(".");
            page_text[i].setTextSize(45);
            page_text[i].setTypeface(null, Typeface.BOLD);
            page_text[i].setTextColor(android.graphics.Color.GRAY);
            count_layout.addView(page_text[i]);
        }
        gallery.setOnItemSelectedListener(new OnItemSelectedListener() {
    
            public void onItemSelected(AdapterView<?> arg0, View arg1,
                    int position, long arg3) {
                // TODO Auto-generated method stub
                if(position == 0){
                    done.setVisibility(View.INVISIBLE);
    
                }
                if(position == 1){
                    done.setVisibility(View.INVISIBLE);
    
                }
                if(position == 2){
                    done.setVisibility(View.INVISIBLE);
    
                }
                if(position == 3){
                    done.setVisibility(View.INVISIBLE);
    
                }if(position == 4){
                    done.setVisibility(View.VISIBLE);
    
                }
                 for (int i = 0; i < count; i++) {
    
    
     StartUp.page_text[i].setTextColor(android.graphics.Color.GRAY);
                    }
    
    
    StartUp.page_text[position].setTextColor(android.graphics.Color.WHITE);
    
            }
    
            public void onNothingSelected(AdapterView<?> arg0) {
                // TODO Auto-generated method stub
    
            }
        });
    
         }
    
        }
    

    ImageAdapter.класс:

    public class IamgeAdapter extends BaseAdapter {
    private Context context;
    
    public IamgeAdapter(Context c) {
    // TODO Auto-generated constructor stub
    this.context = c;
    }
    public int getCount() {
    // TODO Auto-generated method stub
    return flowers.length;
    }
    public Object getItem(int position) {
    // TODO Auto-generated method stub
    return position;
    }
    public long getItemId(int position) {
    // TODO Auto-generated method stub
    return position;
    }
    public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    ImageView image = new ImageView(context);
    image.setImageResource(flowers[position]);
    image.setScaleType(ScaleType.FIT_XY);
    // image.setLayoutParams(new Gallery.LayoutParams(400, 400));
    return image;
    }
    int[] flowers = { R.drawable.start1, R.drawable.start2, 
    
    R.drawable.start3,R.drawable.start4,R.drawable.start5};
    
    }