顶部标题栏在页面滚动后逐渐淡出

来源：互联网发布：hibernate sql注入编辑：程序博客网时间：2024/06/05 07:32

效果如下图：

实现思路：最开始设置透明度为0，然后监听ScrollView的滚动高度，然后随着滚动高度的改变，设置对应的透明度，当滚动高度超过设置的高度时，透明度为1。

1.顶部标题使用ScrollView里包含textview，屏幕主体的ScrollView滚动时，标题的ScrollView也随着滚动，知道标题出现，设置标题所在的ScrollView不可手动滑动，textview显示单行文字，当文字过多时右侧显示省略号，xml布局如下：

<?xml version="1.0" encoding="utf-8"?><FrameLayout 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">    <ScrollView        android:id="@+id/scrollView"        android:scrollbars="none"        android:layout_width="match_parent"        android:layout_height="match_parent">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical">            <com.lotus.looppicturesdemo.LoopPictureView                                android:layout_width="match_parent"                android:layout_height="250dp"/>            <com.lotus.looppicturesdemo.MarqueeTextView                               android:textSize="20sp"                android:layout_margin="10dp"                android:ellipsize="marquee"                android:layout_marginLeft="5dp"                android:layout_centerVertical="true"                android:singleLine="true"                android:marqueeRepeatLimit="marquee_forever"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_toRightOf="@+id/ic_msg"                android:scrollHorizontally="true"                android:gravity="center_vertical" />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="@string/show_text" />        </LinearLayout>    </ScrollView>    <RelativeLayout        android:id="@+id/title_bar"        android:paddingTop="20dp"        android:background="@color/colorPrimary"        android:layout_width="match_parent"        android:layout_height="65dp">        <LinearLayout            android:orientation="horizontal"            android:layout_width="match_parent"            android:layout_height="45dp">            <ImageView                android:layout_marginLeft="10dp"                android:background="@drawable/bg_back"                android:src="@mipmap/ic_launcher_round"                android:scaleType="centerInside"                android:layout_width="35dp"                android:layout_gravity="center"                android:layout_height="35dp" />            <ScrollView                android:scrollbars="none"                android:id="@+id/top_scrollView"                android:layout_width="match_parent"                android:layout_height="match_parent">                <RelativeLayout                    android:layout_width="match_parent"                    android:layout_height="225dp">                    <TextView                        android:id="@+id/tv_top_title"                        android:layout_marginRight="10dp"                        android:lines="1"                        android:ellipsize="end"                        android:gravity="center_vertical"                        android:layout_alignParentBottom="true"                        android:textSize="14sp"                        android:textStyle="bold"                        android:textColor="@color/app_white"                        android:layout_width="match_parent"                        android:layout_height="45dp" />                </RelativeLayout>            </ScrollView>        </LinearLayout>    </RelativeLayout></FrameLayout>

其中bg_back.xml如下：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <corners android:radius="25dp" />    <solid android:color="@color/colorPrimary"/></shape>

2.activity中:

public class MainActivity extends AppCompatActivity implements View.OnScrollChangeListener {    @BindView(R.id.loopPicture)    LoopPictureView loopPicture;    @BindView(R.id.scrollView)    ScrollView scrollView;//监听scrollView的滑动高度，使titleBar逐渐显示出来    @BindView(R.id.tv_top_title)    TextView tvTopTitle;    @BindView(R.id.top_scrollView)    ScrollView topScrollView;    @BindView(R.id.title_bar)    RelativeLayout titleBar;    private int headHeight;//头部高度    @RequiresApi(api = Build.VERSION_CODES.M)    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ButterKnife.bind(this);        tvTopTitle.setText("旗帜引领方向，道路决定命运" +                "旗帜引领方向，道路决定命运" +                "旗帜引领方向，道路决定命运" +                "旗帜引领方向，道路决定命运");        headHeight = AppUtil.dp2px(this, 150);        scrollView.setOnScrollChangeListener(this);        titleBar.getBackground().mutate().setAlpha(0);        topScrollView.setOnTouchListener(new View.OnTouchListener() {            @Override            public boolean onTouch(View view, MotionEvent motionEvent) {                //不能滑动                return true;                //可以滑动                //return false;            }        });    }    @Override    public void onScrollChange(View view, int i, int scrollY, int i2, int i3) {        topScrollView.scrollTo(0, scrollY);        float alpha = 0;        if (scrollY > headHeight) {            alpha = 1;        } else {            alpha = scrollY / (headHeight * 1.0f);        }        int result = (int) (alpha * 255);        titleBar.getBackground().mutate().setAlpha(result);    }}

补充：
在计算headHeight时，使用AppUtil.dp2px(this, 150)，这个方法是添加了一个jar包里面包含的。
1.在工程libs文件夹里添加名为“app-debug.aar”的jar。
2.在app的gradle里面的android里添加：

 sourceSets {        main {            jniLibs.srcDirs = ['libs']        }    }    dexOptions {        javaMaxHeapSize "2g"    }}repositories {    flatDir {        dirs 'libs' //this way we can find the .aar file in libs folder    }    maven {        url "https://jitpack.io"    }

并在dependencies里面添加：

compile(name: 'app-debug', ext: 'aar')

阅读全文

0 0