Android实现炫酷的视觉差效果

龙旋

共 1725字,需浏览 4分钟

 ·

2021-10-11 19:25

这次带来的是结合CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout和FloatingActionButton打造炫酷的视觉差效果。



实现步骤


一:需要在主题文件中将Activity的标题栏去掉



二:编写Activity的布局文件

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" app:contentScrim="@color/colorPrimary" app:expandedTitleMarginStart="15dp" app:collapsedTitleTextAppearance="@style/ToolbarTextStyle" //设置收缩时的标题样式 app:expandedTitleTextAppearance="@style/CollapseexpandedTextStyle" //设置展开时的标题样式 app:layout_scrollFlags="scroll|exitUntilCollapsed" //这个属性使得CollapsingToolbarLayout在滑动的时候显示隐藏 android:layout_height="wrap_content"> <ImageView android:layout_width="match_parent" android:src="@mipmap/bg" android:scaleType="fitXY" app:layout_collapseMode="parallax" //这个属性使得ImageViewCollapsingToolbarLayout展开的时候显示 android:layout_height="200dp" /> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:id="@+id/toolbar" app:layout_collapseMode="pin" //这个属性使得ToolbarCollapsingToolbarLayout收缩的时候显示 android:layout_height="50dp"> android.support.v7.widget.Toolbar> android.support.design.widget.CollapsingToolbarLayout> android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:id="@+id/recycle" app:layout_behavior="@string/appbar_scrolling_view_behavior" //这个属性是让控件在AppBarLayout下边 android:layout_height="match_parent">
android.support.v7.widget.RecyclerView> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:src="@drawable/ic_logo" app:layout_anchor="@id/appbar" //这个属性是让FloatingActionButtonAppBarLayout为锚点,同时这也是使FloatingActionButton实现显示隐藏的关键 app:layout_anchorGravity="bottom|end" //在AppBarLayout的右下方 app:borderWidth="0dp" app:rippleColor="#E23B74" app:elevation="6dp" app:pressedTranslationZ="12dp" android:clickable="true" android:layout_marginRight="10dp" android:layout_height="wrap_content" />android.support.design.widget.CoordinatorLayout>


style/ToolbarTextStyle

和style/CollapseexpandedTextStyle

     


三:编写Activity代码

public class MainActivity extends AppCompatActivity {    Toolbar toolbar;    RecyclerView recyclerView;    AppBarLayout appBarLayout;    private BaseQuickAdapter baseQuickAdapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        toolbar=findViewById(R.id.toolbar);        appBarLayout=findViewById(R.id.appbar);        toolbar.setTitle("我是标题");        setSupportActionBar(toolbar);//        设置条目(可以省略)========================        recyclerView=findViewById(R.id.recycle);        recyclerView.setLayoutManager(new LinearLayoutManager(this));        final ArrayList strings = new ArrayList<>();        for(int x=0;x<10;x++){            strings.add("我是条目"+x);        }        baseQuickAdapter = new BaseQuickAdapter(R.layout.item, strings) {            @Override            protected void convert(BaseViewHolder helper, String item) {                helper.setText(R.id.tv_title, item);            }        };        baseQuickAdapter.openLoadAnimation(BaseQuickAdapter.SLIDEIN_LEFT);        baseQuickAdapter.setOnItemChildClickListener(new BaseQuickAdapter.OnItemChildClickListener() {            @Override            public void onItemChildClick(BaseQuickAdapter adapter, View view, int position) {
} }); recyclerView.setAdapter(baseQuickAdapter);// ================================================== appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() { @Override public void onStateChanged(AppBarLayout appBarLayout, State state) { if( state == State.EXPANDED ) { //展开状态 toolbar.setNavigationIcon(R.drawable.ic_backfour); }else if(state == State.COLLAPSED){ //折叠状态 toolbar.setNavigationIcon(R.drawable.ic_back); }else { //中间状态 toolbar.setNavigationIcon(R.drawable.ic_back); } } });
} private abstract static class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener { public enum State { EXPANDED, COLLAPSED, IDLE }
private State mCurrentState = State.IDLE; @Override public final void onOffsetChanged(AppBarLayout appBarLayout, int i) { if (i == 0) { if (mCurrentState != State.EXPANDED) { onStateChanged(appBarLayout, State.EXPANDED); } mCurrentState = State.EXPANDED; } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) { if (mCurrentState != State.COLLAPSED) { onStateChanged(appBarLayout, State.COLLAPSED); } mCurrentState = State.COLLAPSED; } else { if (mCurrentState != State.IDLE) { onStateChanged(appBarLayout, State.IDLE); } mCurrentState = State.IDLE; } } public abstract void onStateChanged(AppBarLayout appBarLayout, State state); }  }


到这里就结束啦。
浏览 47
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报