Pertanyaan Lokasi halaman untuk GridViewPager


Saya ingin menambahkan indikator lokasi halaman kecil (lingkaran kecil di bagian bawah layar) seperti yang digunakan untuk pemberitahuan di Android Wear untuk GridViewPager.

Apa cara terbaik untuk melakukan ini? Satu masalah kecil bagi saya adalah bahwa saya menggunakan GridViewPager saya dalam arah vertikal tetapi saya pikir itu bisa diketahui.

Apakah saya harus melakukan ini sepenuhnya secara manual atau apakah ada kontrol yang akan membantu?

Edit: Menambahkan gambar tentang apa yang saya butuhkan untuk kejelasan.

Image of small circles


6
2017-07-22 09:04


asal


Jawaban:


Versi baru Wearable hadir dengan fitur ini.

Yang harus Anda lakukan adalah memperbarui dependensi Anda pada build.gradle ke:

 compile "com.google.android.support:wearable:1.1.+"

dan lakukan yang berikut:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.wearable.view.GridViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:keepScreenOn="true" />

<android.support.wearable.view.DotsPageIndicator
    android:id="@+id/page_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal|bottom" />

</FrameLayout>

dan dalam aktivitas Anda, deklarasikan seperti ini:

 DotsPageIndicator dotsIndicator = (DotsPageIndicator)findViewById(R.id.page_indicator);

 dotsIndicator.setPager(mViewPager);

6
2018-02-13 13:17



Beginilah cara saya memecahkannya. Itu mungkin bukan cara terbaik tetapi berhasil. Jika ada yang punya solusi lebih baik silakan edit posting ini atau buat posting baru.

Pertama saya memiliki drawable yang menciptakan objek bulat.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#eeffffff"  />
    <corners android:bottomRightRadius="200dip"
        android:bottomLeftRadius="200dip"
        android:topRightRadius="200dip"
        android:topLeftRadius="200dip"/>
</shape>

Kemudian dalam tata letak saya, saya telah membuat struktur berikut dalam kasus saya, saya perlu memiliki titik-titik secara vertikal. Tapi itu mungkin untuk membuat versi horizontal juga.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">
    <RelativeLayout
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="vertical">
        <LinearLayout
             android:layout_width="15dp"
             android:layout_height="wrap_content"
             android:layout_centerVertical="true"
             android:id="@+id/dotlayout"
             android:orientation="vertical">
         </LinearLayout>
     </RelativeLayout>
     <android.support.wearable.view.GridViewPager
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:id="@+id/pager">
     </android.support.wearable.view.GridViewPager>
</RelativeLayout>

Saya mencoba membuat titik-titik itu semirip mungkin dengan versi Google. Dan saya mendapatkannya cukup dekat tetapi tidak sempurna karena jarak antara titik-titik adalah dari satu atau dua piksel. Saya menggunakan tombol pada saat ini tetapi bisa saja setiap tampilan yang Anda dapat membuat gambar mungkin akan lebih baik:

Saya menambahkan titik-titik ke saya dotlayout 

for(int i = 0; i < numberOfDots; i++){
     Button b = new Button(this);
     configDot(b, 4, 2);
     dotLayout.addView(b);
}

Ingat untuk membuat tombol mulai besar:

configDot((Button) dotLayout.getChildAt(0), 6, 1);

Dan metode Config:

private void configDot(Button b, int size, int margin){
    b.setBackground(getResources().getDrawable(R.drawable.roundbutton));
    LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(getPxFromDp(size), getPxFromDp(size));
    p.gravity = Gravity.CENTER_HORIZONTAL;
    p.setMargins(0, margin, 0, margin);
    b.setLayoutParams(p);
}
private int getPxFromDp(int dp){
    return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
}

Pada pager saya menambahkan onPageChangeListener Di mana saya mengkonfigurasi ulang semua tampilan untuk memiliki ukuran yang benar.

pager.setOnPageChangeListener(new GridViewPager.OnPageChangeListener() {
      @Override
      public void onPageScrolled(int i, int i2, float v, float v2, int i3, int i4) {}

      @Override
      public void onPageSelected(int i, int i2) {
           for(int j = 0; j < dotLayout.getChildCount(); j++){
               configDot((Button) dotLayout.getChildAt(j), 4, 2);
           }
           if(dotLayout.getChildCount() > i) {
                configDot((Button) dotLayout.getChildAt(i), 6, 1);
           }
      }

      @Override
            public void onPageScrollStateChanged(int i) {}
 });

Seperti inilah tampilannya:

enter image description here


4
2017-07-25 08:31



Anda mendapat ide yang tepat.

Periksa sdk/samples/android-20/wearable/JumpingJack proyek.

enter image description hereenter image description here

Berikut tata letaknya untuk indikator:

<LinearLayout
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/indicator_0"
        android:layout_marginRight="5dp"
        android:src="@drawable/full_10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ImageView
        android:id="@+id/indicator_1"
        android:src="@drawable/empty_10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

Kemudian dalam Kegiatan:

mPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

    @Override
    public void onPageSelected(int i) {
        setIndicator(i);
    }
    ...
}

private void setIndicator(int i) {
    switch (i) {
        case 0:
            mFirstIndicator.setImageResource(R.drawable.full_10);
            mSecondIndicator.setImageResource(R.drawable.empty_10);
            break;
        case 1:
            mFirstIndicator.setImageResource(R.drawable.empty_10);
            mSecondIndicator.setImageResource(R.drawable.full_10);
            break;
    }
}

2
2017-07-28 00:35



Untuk menggunakan GridViewPager secara efektif, Anda harus mengimplementasikan GridPagerAdapter (yang mungkin sudah Anda lakukan). Di adaptor, di Anda instantiateItem, buat beberapa perubahan berdasarkan nomor baris atau kolom, tergantung pada tata letak Anda. Itu bisa seperti ini:

    @Override
    protected Object instantiateItem(ViewGroup viewGroup, int row, int col) {
        Log.d("test", "instantiateItem: row=" + row + " col=" + col);
        View v;

        // row == 0 for col scroll
        if(col == 0){
            v = View.inflate(mContext, R.layout.your_view, null);
            TextView textView = (TextView) v.findViewById(R.id.your_text_view);
            // Change the textView text based on the row or column number
        } else {
            v = View.inflate(mContext, R.layout.your_other_view, null);
        }
        viewGroup.addView(v);
        return v;
    }

perhatikan: jika Anda ingin tata letak di halaman menjadi sama, tetapi masing-masing untuk menampilkan nomor halaman yang benar, Anda juga bisa melakukannya. Hanya mengembang tata letak yang sama, tetapi ubah masing-masing textView ke teks yang sesuai.

Edit (menanggapi gambar dan klarifikasi) Mungkin Anda bisa memiliki sumber daya yang bisa ditarik dari titik putih kecil. Dalam pandangan Anda, Anda menambahkan larik titik-titik tersebut dengan LinearLayout atau ListView dan, berdasarkan kolom yang Anda gunakan, Anda mengukur titik yang sesuai, menggunakan sesuatu seperti

// Read your drawable from somewhere
Drawable dr = getResources().getDrawable(R.drawable.somedrawable);
Bitmap bitmap = ((BitmapDrawable) dr).getBitmap();
// Scale it to 50 x 50
Drawable d = new BitmapDrawable(getResources(), Bitmap.createScaledBitmap(bitmap, 50, 50, true));
// Set your new, scaled drawable "d"

1
2017-07-22 19:25