android應用的首頁引導輪播圖和banner輪播框架的使用
阿新 • • 發佈：2018-11-16
一、引導頁輪播圖
說明：專案中的輪播圖不要求太多的效果，所以使用了guideshow的jar包
Git地址：https://github.com/javajavadog/guideshow
專案中使用的步驟
1、開啟專案的地址，下載其中的jar包，複製到專案中的lib下並右鍵新增到依賴中
2、讓splashActivity繼承ABSGuideActivity類並複寫所有方法
public class SplashActivity extends AbsGuideActivity { private List<SinglePage> guideContent; // @Override // public void onCreate(Bundle savedInstanceState) { // super.onCreate(savedInstanceState); // setContentView(R.layout.activity_splash); // } @Override public List<SinglePage> buildGuideContent() { setStatusBarColor(); guideContent = new ArrayList<>();//建立集合存放輪播圖片 /** * 建立第一圖片 */ SinglePage page1 = new SinglePage();//單個圖片物件 page1.mBackground = getResources().getDrawable(R.mipmap.ic_1);//新增圖片 //頁面元素動畫 SingleElement singleElement1 = new SingleElement(200, 200, 400, 400, 0.0f, 1.0f, BitmapFactory.decodeResource( getResources(), R.mipmap.ic_stuff)); SingleElement singleElement2 = new SingleElement(700, 800, 700, 100, 0.0f, 1.0f, BitmapFactory.decodeResource( getResources(), R.mipmap.ic_stuff)); page1.mElementsList.add(singleElement1);//頁面新增的兩個元素 page1.mElementsList.add(singleElement2); guideContent.add(page1);//圖片存放到集合中 * 在滑動到最後一張圖片時，就要點選按鈕跳轉到主介面 */ SinglePage page2 = new SinglePage(); page2.mCustomFragment = new EntryFragment();//定義一個fragment類，處理跳轉的 guideContent.add(page2); return guideContent; } /** * 是否顯示下面的小圓點 * @return */ @Override public boolean drawDot() { return false; } /** * 未被選中的圖片圓點的圖片 * @return */ @Override public Bitmap dotDefault() { return BitmapFactory.decodeResource(getResources(), R.mipmap.ic_dot_default); } /** * 被選中的圓點圖片 * @return */ @Override public Bitmap dotSelected() { return BitmapFactory.decodeResource(getResources(), R.mipmap.ic_dot_selected); } /** * 輪播圖的個數 * @return */ @Override public int getPagerId() { // return R.id.guide_container; return 2; } }
getPagerId()的房return返回的物件也可寫成
return R.id.guide_container;在專案的res下面建立ids.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<item name="guide_container" type="id"/>
</resources>3、定義一個EntryFragment類處理跳轉
public class EntryFragment extends Fragment { FragmentEntryBinding binding; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { setStatusBarColor(); binding = DataBindingUtil.inflate(inflater, R.layout.fragment_entry, container, false); return binding.getRoot(); } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); initView(); } private void initView() { binding.btnEntry.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(getActivity(), MainActivity.class);//跳轉到主介面 startActivity(intent); getActivity().onBackPressed();//銷燬自己 } }); } }
佈局（沒有使用databinding把layout去掉）
<?xml version="1.0" encoding="utf-8"?> <layout> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:clipToPadding="false" android:fitsSystemWindows="true" tools:context="com.maijia.QR.fragment.EntryFragment"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:background="@mipmap/ic_4" /> <Button android:id="@+id/btn_entry" android:layout_width="160dp" android:layout_height="wrap_content" android:text="進入" android:gravity="center" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" /> </RelativeLayout> </layout>
OK大功告成，可以劃劃試試
最後如果專案要求比較多，可以使用海外人士paolorotolo的AppIntro框架
Git地址：https://github.com/PaoloRotolo/AppIntro
二、頭部banner圖輪播
說明：使用的是Git比較火的banner框架
地址：https://github.com/youth5201314/banner
1、新增依賴
dependencies{
compile 'com.youth.banner:banner:1.4.10' //最新版本
}2、清單檔案中新增相關的許可權
<!-- if you want to load images from the internet -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- if you want to load images from a file OR from the internet -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />3、banner的佈局
<com.youth.banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="@dimen/base185dp"
android:layout_marginTop="@dimen/base3dp"
android:layout_marginBottom="@dimen/base3dp"
></com.youth.banner.Banner>4、設定圖片載入器程式碼
public class GlideImageLoader extends ImageLoader {
@Override
public void displayImage(Context context, Object path, ImageView imageView) {
//具體方法內容自己去選擇，次方法是為了減少banner過多的依賴第三方包，所以將這個許可權開放給使用者去選擇
Glide.with(context.getApplicationContext())
.load(path)
.into(imageView);
}
@Override
public ImageView createImageView(Context context) {
//圓角
return new RoundAngleImageView(context);
}
}5、專案程式碼的使用
//本地圖片資料（資原始檔）
List<Integer> list = new ArrayList<>();
list.add(R.mipmap.b1);
list.add(R.mipmap.b2);
list.add(R.mipmap.b3);
HeaderBinding.banner.setImages(list)
.setImageLoader(new GlideImageLoader())//圖片載入器
.isAutoPlay(true)
.setDelayTime(5000)
.setOnBannerListener(new OnBannerListener() {
@Override
public void OnBannerClick(int position) {
ToastUtil.show(getActivity(),"你點選的是：："+position);
}
})
.start();
@Override
public void onResume() {
HeaderBinding.banner.startAutoPlay();
super.onResume();
}
@Override
public void onPause() {
HeaderBinding.banner.stopAutoPlay();
super.onPause();
}另外：XBanner專案也不錯哦