An overview,
At present, most of the details pages of e-commerce apps are almost the same in length, almost all of which are pictures of a product above. When you slide, there will be a Tab suspended above, which is really a good user experience. If the Tab slides up, users may need to slide down and click Tab again, which is really troublesome. Immersive status bar, Google doesn’t say it’s Immersive, just Immersive Mode. However, the immersive status bar is not a rude name, along with the public, but the Android environment is not as special as the IOS environment, such as Huawei ROM and Xiaomi ROM virtual keys are completely different, all Android developers are not easy…
Two, we want to achieve immersion and suspension effect
Implementation class
-
Customize ScrollView
-
StatusBarUtil (https://github.com/laobie/StatusBarUtil) / / status bar very good tool Four, layout,
<? xml version="1.0" encoding="utf-8"? > <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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.xiaoyuan.StickyScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true">
<LinearLayout
android:id="@+id/ll_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="500dip"
android:background="@mipmap/meinv"/>
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="Beauty" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center"
android:text="Female"/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center"
android:text="Beauty"/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center"
android:text="No"/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center"
android:text="Beauty"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:tag="sticky">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="#ffffff"
android:orientation="horizontal">
<TextView
android:id="@+id/infoText"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Beauty message"
android:textColor="# 000000"
android:textSize="16dp" />
<TextView
android:id="@+id/secondText"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Introduction to beautiful Women"
android:textColor="# 000000"
android:textSize="16dp" />
</LinearLayout>
</LinearLayout>
<FrameLayout
android:id="@+id/tabMainContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:minHeight="400dp">
</FrameLayout>
</LinearLayout>
</com.xiaoyuan.StickyScrollView>
<RelativeLayout
android:id="@+id/ll_good_detail"
android:layout_width="match_parent"
android:layout_height="49dp"
android:background="# 00000000"
android:paddingTop="@dimen/spacing_normal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dip"
android:layout_centerHorizontal="true"
android:text="Return"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dip"
android:text="The beauty"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:layout_alignParentRight="true"
android:layout_marginRight="10dip"
android:layout_centerHorizontal="true"
android:text="Share"/>
</RelativeLayout>
</FrameLayout>
</RelativeLayout>
Copy the codeNote: We set the Tab to float to android:tag= “sticky”
Six, implementation code
public class MainActivity extends AppCompatActivity implements View.OnClickListener, StickyScrollView.OnScrollChangedListener {
TextView oneTextView, twoTextView;
private StickyScrollView stickyScrollView;
private int height;
private LinearLayout llContent;
private RelativeLayout llTitle;
private FrameLayout frameLayout;
private TextView title;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); initView(); initListeners(); } /** * initializes View */ private voidinitView() { stickyScrollView = (StickyScrollView) findViewById(R.id.scrollView); frameLayout = (FrameLayout) findViewById(R.id.tabMainContainer); title = (TextView) findViewById(R.id.title); oneTextView = (TextView) findViewById(R.id.infoText); llContent = (LinearLayout) findViewById(R.id.ll_content); llTitle = (RelativeLayout) findViewById(R.id.ll_good_detail); oneTextView.setOnClickListener(this); twoTextView = (TextView) findViewById(R.id.secondText); twoTextView.setOnClickListener(this); stickyScrollView.setOnScrollListener(this); StatusBarUtil.setTranslucentForImageView(MainActivity.this, 0, title); FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) llTitle.getLayoutParams(); params.setMargins(0, getStatusHeight(), 0, 0); llTitle.setLayoutParams(params); / / the default setting a Frg getSupportFragmentManager (). The beginTransaction (). The replace (R.i which abMainContainer, Fragment.newInstance()).commit(); } /** * Get the status bar height * @return
*/
private int getStatusHeight() {
int resourceId = MainActivity.this.getResources().getIdentifier("status_bar_height"."dimen"."android");
return getResources().getDimensionPixelSize(resourceId);
}
@Override
public void onClick(View v) {
if (v.getId() == R.id.infoText) {
getSupportFragmentManager().beginTransaction().replace(R.id.tabMainContainer, Fragment.newInstance()).commit();
} else if (v.getId() == R.id.secondText) {
getSupportFragmentManager().beginTransaction().replace(R.id.tabMainContainer, Fragment1.newInstance()).commit();
}
}
private void initListeners() {/ / to get content total height final ViewTreeObserver vto. = llContent getViewTreeObserver (); vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() { height = llContent.getHeight(); / / note to remove llContent getViewTreeObserver () removeGlobalOnLayoutListener (this); }}); / / get fragments highly ViewTreeObserver ViewTreeObserver = frameLayout. GetViewTreeObserver (); viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() { height = height - frameLayout.getHeight(); / / note to remove the frameLayout getViewTreeObserver (.) removeGlobalOnLayoutListener (this); }}); / / get the title highly ViewTreeObserver viewTreeObserver1 = llTitle. GetViewTreeObserver (); viewTreeObserver1.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() { height = height - llTitle.getHeight() - getStatusHeight(); / / total sliding distance stickyScrollView setStickTop (llTitle. GetHeight () + getStatusHeight ()); How many suspended / / / / set range note to remove llTitle getViewTreeObserver () removeGlobalOnLayoutListener (this); }}); } @Override public void onScrollChanged(int l, int t, int oldl, int oldt) {if (t <= 0) {
llTitle.setBackgroundColor(Color.argb((int) 0, 255, 255, 255));
StatusBarUtil.setTranslucentForImageView(MainActivity.this, 0, title);
} else if (t > 0 && t <= height) {
float scale = (float) t / height; int alpha = (int) (255 * scale); llTitle.setBackgroundColor(Color.argb((int) alpha, 227, 29, 26)); / / set the transparency of the title bar and color StatusBarUtil setTranslucentForImageView (MainActivity. This, alpha, title); // Set the status bar transparency}else{ llTitle.setBackgroundColor(Color.argb((int) 255, 227, 29, 26)); StatusBarUtil.setTranslucentForImageView(MainActivity.this, 255, title); }}}Copy the codeNote: stickyScrollView. SetStickTop (int height) by this method can start suspension Settings Tab distance how high
We do this by constantly changing the transparency of our title bar and status bar by listening to the ScrollView slide distance, where we calculate several heights (the slide distance). Finally to calculate the total sliding distance, according to the sliding distance with the total sliding distance to calculate the value of transparency.
StatusBarUtil.setTranslucentForImageView(MainActivity.this, 0, title); We use the tool to achieve the image into the status bar. The View passed inside is the View underneath the image.
conclusion
Before Android4.4, there was no such thing as immersion. You can download the source code to study it. Do it yourself
Github source code download
https://github.com/xiaoyuanandroid/ProductPage
Welcome to leave a comment below help, you can reward support
Refer to the great god of the blog https://blog.csdn.net/xiaoyuan511/article/details/53146514