輪播圖片的狀態欄沉浸

2019-11-09 17:05:37

字體：大中小

來源：轉載

供稿：網友

1. 效果

最近碰到這種類似需求，然后做出如圖所示的效果。這里寫圖片描述源代碼地址:github ，如果對你有幫助希望給個star。

2. 干貨

給RecyclerView添加header，這里我使用的是這位大佬的庫，添加header ，內容有點多，但是我們如果要用，就是其中一部分就可以了，等下見代碼。當圖片在頂部時，會將圖片沉浸到狀態欄，用到這位大佬的庫，沉浸狀態欄工具，封裝的很好，原理也說的很清楚，也不大，其實將網上的沉浸狀態欄方法進行了總結。使圖片輪播的一個類，ScheduledExecutorService，他可以定時周期執行指定任務. a.布局代碼很簡單，就是個recyclerview,見代碼<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@+id/recyView" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v7.widget.RecyclerView></LinearLayout>

b. 然后獲取數據，包括兩部分，一個是圖片資源數據，我這里是將圖片資源放在項目中了，真正項目中，應該不是，會做成接口，但是這里就這樣做吧，將資源id放在一個數組中。還有就是列表數據，這里我直接是一個string集合，見代碼。

PRivate void initDatas() { imgResIds = new int[]{R.mipmap.a1,R.mipmap.a2,R.mipmap.a3}; for(int i=0;i<40;i++){ stringLists.add("德德德瑪西亞~~"+i); } }

c.然后我們在setContent()后面調用設置狀態的方法 StatusBarUtil.setTranslucentForImageView(MainActivity.this,0,null);

進入這個方法，我們可以看到這樣一段代碼

/** * 為頭部是 ImageView 的界面設置狀態欄透明 * * @param activity 需要設置的activity * @param statusBarAlpha 狀態欄透明度 * @param needOffsetView 需要向下偏移的 View */ public static void setTranslucentForImageView(Activity activity, int statusBarAlpha, View needOffsetView) { if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) { return; } setTransparentForWindow(activity); addTranslucentView(activity, statusBarAlpha); if (needOffsetView != null) { ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) needOffsetView.getLayoutParams(); layoutParams.setMargins(layoutParams.leftMargin, layoutParams.topMargin + getStatusBarHeight(activity), layoutParams.rightMargin, layoutParams.bottomMargin); } }

經過查資料可知這段代碼的意思，設置狀態欄是4.4才出來的新東西，所以在4.4以前，誰都不能用什么方法都不可以設置，所以小于4.4時return，進入setTransparentForWindow(),可以看到如下的代碼

/** * 設置透明 */ private static void setTransparentForWindow(Activity activity) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { activity.getWindow().setStatusBarColor(Color.TRANSPARENT); activity.getWindow() .getDecorView() .setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN); } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { activity.getWindow() .setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); } }

集中當5.0以上后，設置狀態欄透明很簡單，直接這樣代碼 activity.getWindow().setStatusBarColor(Color.TRANSPARENT);就可以，其中下面這行代碼是為了處理狀態欄和activity之間的關系，差不多包含activity覆蓋狀態欄，不會覆蓋，共存。 activity.getWindow() .getDecorView() .setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN); 不清楚的可以看這里，點擊所以上面這些所以方法就是為了讓狀態欄透明，然后他為了滿足不同的需求，還兼容設置狀態欄的透明度，就是這行代碼 addTranslucentView(activity, statusBarAlpha); 還有第三個參數那個view我使用了下，一般我們圖片沉浸會和toolbar配合使用，這里theme是noactionbar，但是在FrameLayout中加了toolbar后，這個橫條會直接頂到狀態欄去，所以這明顯是不行的，所以設置下移，但是我這里沒有設置view，所以這里可以直接null。 d. 對recyclerview初始化，因為為了體驗，我這里將輪播的圖片添加到recyclerview的頭部去，因為如果不這樣，會出現這樣的情況，上面圖片在輪播固定死，而列表的滑動在屏幕的中間滑動，效果很差。代碼如下：

private void initRecyView() { recyclerView = (RecyclerView) this.findViewById(R.id.recyView); recyclerView.setItemAnimator(new DefaultItemAnimator()); recyclerView.setLayoutManager(new LinearLayoutManager(this)); /** * 使用了框架，設置itemdecoration * */ recyclerView.addItemDecoration(new HorizontalDividerItemDecoration.Builder(this) .color(Color.LTGRAY) .sizeResId(R.dimen.divider) .marginResId(R.dimen.leftmargin, R.dimen.rightmargin) .build()); adapter = new CommonAdapter<String>(this,stringLists,R.layout.item) { @Override public void convert(ViewHolder holder, String s) { holder.setText(R.id.tv, s); } }; adapter.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(ViewGroup parent, View view, Object o, int position) { Toast.makeText(MainActivity.this,"你是幾-->"+position,Toast.LENGTH_SHORT).show(); } @Override public boolean onItemLongClick(ViewGroup parent, View view, Object o, int position) { return false; } }); initHeaderAndFooter(); }

上面代碼是recyclerview的內容不是這里的重點，添加頭部的方法就是這里 initHeaderAndFooter();代碼如下：

private void initHeaderAndFooter() { mHeaderAdapter = new HeaderRecyclerAndFooterWrapperAdapter(adapter) { @Override protected void onBindHeaderHolder(ViewHolder viewHolder, int headerPos, int layoutId, Object o) { switch (layoutId){ case R.layout.header1: HeaderView1 header1 = (HeaderView1) o; viewHolder.setImageResource(R.id.iv,header1.getImgResId()); break; } } }; //因為這里只有一個頭部，所以使用的方法是add,如果多個，則要使用set mHeaderAdapter.addHeaderView(R.layout.header1,getHeader1Obj()); recyclerView.setAdapter(mHeaderAdapter); }

其中layout.header1的布局就是一張圖片，代碼如下：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/iv" android:layout_width="match_parent" android:layout_height="240dp" android:scaleType="fitXY" android:src="@mipmap/a1"/></FrameLayout>

對象HeaderView1就是一個資源di

package guozhaohui.com.sliderstatusbar;/** * Created by ${GuoZhaoHui} on 2017/2/7. * Abstract: */public class HeaderView1 { private int imgResId; public HeaderView1(int imgResId) { this.imgResId = imgResId; } public int getImgResId() { return imgResId; } public void setImgResId(int imgResId) { this.imgResId = imgResId; }}

在這里差不多可以是圖片沉浸了，但是為了讓圖片輪播，還要處理這個 ScheduledExecutorService，代碼如下：

setContentView(R.layout.activity_main); StatusBarUtil.setTranslucentForImageView(MainActivity.this,0,null); initDatas(); this.scheduledExecutorService = Executors.newSingleThreadScheduledExecutor(); this.scheduledExecutorService.scheduleWithFixedDelay(new ViewPagerTask(), 2, 2, TimeUnit.SECONDS); initRecyView();

我這里讓它在沒張圖片停留兩秒，然后沒隔兩秒做的任務是將頭部header內容清空，然后在添加頭部，這樣就實現了輪播了。代碼如下：

public class ViewPagerTask implements Runnable{ @Override public void run() { currentPageImg = (currentPageImg+1) % imgResIds.length; //更新界面 handler.obtainMessage().sendToTarget(); } } private Handler handler = new Handler(){ public void handleMessage(android.os.Message msg) { mHeaderAdapter.clearHeaderView();//這里要將header清除，不然會疊加 mHeaderAdapter.addHeaderView(R.layout.header1,getHeader1Obj()); mHeaderAdapter.notifyDataSetChanged(); //注意不能在這里調用這個方法，因為每次調用這個方法都會將整個adapter刷新，并不能保存當前的狀態，可以自行驗證，當下滑后，會出現bug// recyclerView.setAdapter(mHeaderAdapter); }; };