2015年12月21日 星期一

Android 實戰記錄 (16) - ViewPager not use Fragment

這次很特別,
剛好要使用ViewPager,但跟以往不同,
因為使用的是Api 8且使用的是Android Studio
導致
因為API 8 無法使用Fragment ,Fragment只支援API 11 以上。
接著viewpagerindicator 用Gradle,我又嫌麻煩。

就得自己寫ViewPager、自己動態產生頁面、自己實作viewpagerindicator

參考這個人寫的程式,大部分就可以完成
http://huli.logdown.com/posts/283657-android-viewpager-page

只是他或許少給了什麼(style)
所以我幫他補齊這一點。

而且我不能讓他按radio button

<!--ViewPager Radio Button --><style name="viewpagerindicator_circle">
    <item name="android:layout_width">11dp</item>
    <item name="android:layout_height">11dp</item>
    <item name="android:button">@drawable/view_pager_circle_background</item>
    <item name="android:editable">false</item>
    <item name="android:layout_marginLeft">2dp</item>
    <item name="android:layout_marginRight">2dp</item>
</style>

然後也很不幸的,我的circle,有大有小,有透明。

所以實作了一個圈圈,是雙圓圈。

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Larger blue circle in back -->    <item>
        <shape android:shape="oval">
            <solid android:color="#0fff"/>
            <size                android:width="9.5dp"                android:height="9.5dp"/>
        </shape>
    </item>
    <!-- Smaller red circle in front -->    <item>
        <shape android:shape="oval">
            <!-- transparent stroke = larger_circle_size - smaller_circle_size -->            <stroke android:color="@android:color/transparent"                android:width="5dp"/>
            <solid android:color="#cfff"/>
            <size                android:width="7.5dp"                android:height="7.5dp"/>
        </shape>
    </item>
</layer-list>

接著因為對方是固定的,不是動態產生
我就實作動態產生RadioButton

動態產生,又會導致layout跑版,只好態動設定寬高、邊距

/** * 取得Radio Button Circle Indicator * @return */public RadioButton getRadioButtons() {
   float radio_dps = 9.5f;
   float margin_dps = 2f;
   final float scale = getResources().getDisplayMetrics().density;
   int radioSize = (int) (radio_dps * scale + 0.5f);
   int margin = (int) (margin_dps * scale + 0.5f);
   RadioButton radio = (RadioButton)getLayoutInflater().inflate(R.layout.item_view_pager_circle, null);
   radio.setHeight(radioSize);
   radio.setWidth(radioSize);
   radio.setButtonDrawable(R.drawable.view_pager_circle_background);

   LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT, 1); // , 1是可選寫的   lp.setMargins(margin, 0, margin, 0);
   lp.gravity = Gravity.CENTER;
   radio.setLayoutParams(lp);
   radio.setEnabled(false);

   return radio;
}


radioGroup.addView(getRadioButtons());


RadioButton radio = (RadioButton) radioGroup.getChildAt(0);
radio.setChecked(true);

按下圖,又要能夠跳到某一頁面。

我在ImageView賽了Tag,是該筆資料的物件。

在加上輪播

// 启动banner自动轮播public void bannerStartPlay() {
   if (mBannerTimer != null) {
      if (mBannerTimerTask != null)
         mBannerTimerTask.cancel();
      mBannerTimerTask = new BannerTimerTask();
      mBannerTimer.schedule(mBannerTimerTask, 5000, 5000);// 5秒后执行,每隔5秒执行一次   }
}

// 暂停banner自动轮播public void bannerStopPlay() {
   if (mBannerTimerTask != null)
      mBannerTimerTask.cancel();
}

class BannerTimerTask extends TimerTask {
   @Override   public void run() {
      Message msg = new Message();

      if (pagerAdapter.getCount() <= 1)
         return;
      int currentIndex = viewPager.getCurrentItem();
      if (currentIndex == pagerAdapter.getCount() - 1)
         msg.what = 0;
      else         msg.what = currentIndex + 1;

      mTimerHandler.sendMessage(msg);
   }
}

mBannerTimer = new Timer();
mTimerHandler = new Handler() {
   public void handleMessage(Message msg) {
      viewPager.setCurrentItem(msg.what);
      super.handleMessage(msg);
   }
};

大至上就完成了。

很累的過程。


沒有留言:

張貼留言