Android——仿美团商品详情页折叠效果

最新推荐文章于 2024-08-02 10:58:22 发布
最新推荐文章于 2024-08-02 10:58:22 发布
阅读量8.7k 收藏 6
点赞数 1
分类专栏： Android Matarial Design 文章标签： android 美团 折叠 Collapsing
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012230055/article/details/78228148
版权

首先看下效果图：
    
相信大家已经不陌生了，进入商品详情页，首先是左图的效果，当我们向上滑动的时候逐渐变化为右图的效果。使用知识点：MaterialDesign中的CoordinatoryLayout,ToolBarLayout,CollapsingToolBarLayout。

源码如下：
1、xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:collapsedTitleGravity="center"
            app:contentScrim="@android:color/white"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="fitXY"
                android:src="@drawable/huntuan"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                android:gravity="center"
                app:layout_collapseMode="pin">

                <TextView
                    android:id="@+id/title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:paddingRight="50dp"
                    android:text="哈哈哈"
                    android:textSize="18sp"/>
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:orientation="horizontal"
            android:paddingLeft="10dp">

            <LinearLayout
                android:id="@+id/normal"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:orientation="vertical"
                android:visibility="gone">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="美味馄饨店"
                    android:textSize="17sp"/>

                <RatingBar
                    style="@style/Base.Widget.AppCompat.RatingBar.Small"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:max="5"
                    android:numStars="5"
                    android:progress="4"/>
            </LinearLayout>

            <TextView
                android:id="@+id/phone_buy"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:text="手机买单更优惠"
                android:textSize="17sp"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="35dp"
                android:layout_margin="10dp"
                android:background="@android:color/holo_orange_dark"
                android:text="买单"
                android:textColor="@android:color/white"
                android:textSize="17sp"/>
        </LinearLayout>

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/darker_gray">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">


                <android.support.v4.widget.Space
                    android:layout_width="match_parent"
                    android:layout_height="1px"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/white"
                    android:padding="10dp"
                    android:text="滨湖区东南大学立业楼C栋"
                    android:textSize="17sp"/>

                <android.support.v4.widget.Space
                    android:layout_width="match_parent"
                    android:layout_height="15px"/>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/white"
                    android:orientation="vertical"
                    android:padding="10dp">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="【周一至周日】20元代金券一张，免预约"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:text="￥11"
                        android:textColor="@android:color/holo_green_dark"
                        android:textSize="20sp"/>
                </LinearLayout>

                <android.support.v4.widget.Space
                    android:layout_width="match_parent"
                    android:layout_height="1px"/>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/white"
                    android:orientation="vertical"
                    android:padding="10dp">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="【周一至周日】20元代金券一张，免预约"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:text="￥11"
                        android:textColor="@android:color/holo_green_dark"
                        android:textSize="20sp"/>
                </LinearLayout>

                <android.support.v4.widget.Space
                    android:layout_width="match_parent"
                    android:layout_height="15px"/>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/white"
                    android:divider="@drawable/line_divier"
                    android:orientation="vertical"
                    android:showDividers="middle">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center_vertical"
                        android:orientation="horizontal"
                        android:padding="10dp">

                        <RatingBar
                            style="@style/Base.Widget.AppCompat.RatingBar.Small"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:max="10"
                            android:numStars="5"
                            android:progress="10"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="10dp"
                            android:text="4.9分"
                            android:textColor="@android:color/holo_orange_dark"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="10dp"
                            android:text="高于同行75%"/>
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:padding="10dp">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:drawableLeft="@drawable/leak_canary_icon"
                            android:drawablePadding="10dp"
                            android:gravity="center_vertical"
                            android:text="哈哈"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="10dp"
                            android:text="真好吃"
                            android:textSize="18sp"/>
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:padding="10dp">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:drawableLeft="@drawable/leak_canary_icon"
                            android:drawablePadding="10dp"
                            android:gravity="center_vertical"
                            android:text="哈哈"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="10dp"
                            android:text="真好吃"
                            android:textSize="18sp"/>
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:padding="10dp">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:drawableLeft="@drawable/leak_canary_icon"
                            android:drawablePadding="10dp"
                            android:gravity="center_vertical"
                            android:text="哈哈"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="10dp"
                            android:text="真好吃"
                            android:textSize="18sp"/>
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:padding="10dp">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:drawableLeft="@drawable/leak_canary_icon"
                            android:drawablePadding="10dp"
                            android:gravity="center_vertical"
                            android:text="哈哈"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="10dp"
                            android:text="真好吃"
                            android:textSize="18sp"/>
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:padding="10dp">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:drawableLeft="@drawable/leak_canary_icon"
                            android:drawablePadding="10dp"
                            android:gravity="center_vertical"
                            android:text="哈哈"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="10dp"
                            android:text="真好吃"
                            android:textSize="18sp"/>
                    </LinearLayout>
                </LinearLayout>

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

2、Java文件

public class MeituanActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private AppBarLayout appBarLayout;
    private CollapsingToolbarLayout collapsingToolbarLayout;
    private LinearLayout normal;
    private TextView phoneBuy,title;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_meituan);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });

        collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayout);
        collapsingToolbarLayout.setTitle("");
        normal = (LinearLayout) findViewById(R.id.normal);
        phoneBuy = (TextView) findViewById(R.id.phone_buy);
        title = (TextView) findViewById(R.id.title);

        appBarLayout = (AppBarLayout) findViewById(R.id.appBarLayout);
        appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener(){

            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State state) {
                if (state == State.COLLAPSED){//折叠
                    //collapsingToolbarLayout.setTitle("美味馄饨店");
                    title.setText("美味馄饨店");
                    normal.setVisibility(View.GONE);
                    phoneBuy.setVisibility(View.VISIBLE);
                }else if (state == State.EXPANDED){//展开
                    //collapsingToolbarLayout.setTitle("");
                    title.setText("");
                    normal.setVisibility(View.VISIBLE);
                    phoneBuy.setVisibility(View.GONE);
                }else {//中间态
                    //collapsingToolbarLayout.setTitle("");
                    title.setText("");
                }
            }
        });
    }
}

知识点参考文章：
Materail Design 入门（七）——AppBarLayout的使用方法
Materail Design 入门（八）——CollapsingToolbarLayout的使用方法

小欣儿
关注
专栏目录
android美团点餐界面,Android 仿美团点餐页面布局介绍
weixin_34443284的博客
05-31 2783
该楼层疑似违规已被系统折叠隐藏此楼查看此楼1部分：a．顶部是一个轮播,首先需要在build.gradle导入依赖implementation'com.youth.banner:banner:1.4.9'使用标签b．商品和评价那使用选项卡属性android:layout_width="match_parent"android:layout_height="36dp"android:orientat...
Android仿美团团购详情页下拉图片放大效果demo,简单可直接用在项目中
01-04
Android仿美团团购详情页下拉图片放大效果demo,简单可直接用在项目中
手机端仿美团商铺详情页面
07-31
手机端仿美团商铺详情页面，购物车、商品列表、商品分类
Android 仿美团网,大众点评购买框悬浮效果，仿美团详情页，可下拉放大图片，向上滚动图片，松手有动画...
buyadong1985的博客
09-12 510
先看效果图 直接上代码注释都写到代码里面了： 自定义的ScrollView package mm.shandong.com.testmtxqcomplex.myui; import android.content.Context; import android.util.AttributeSet; import android.widget.ScrollView; /** ...
Androidstudio开发，购物商城app 实现商品详情页（六）
最新发布
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
08-02 569
相关视频教程在某站上面(🔍浩宇软件开发)
android 仿美团详情页,仿美团详情页与购物车源码-订单页
weixin_28932927的博客
06-02 307
(function(){//订单卡片模版var itemTmpl = ''+''+ ''+''+''+'$poi_name'+''$status_description'+''+'$getProduct'+''+''+'$getComment'+'';/*** 渲染评价按钮* @param {}*/functiongetComment(data...
仿美团详情滑动界面，并兼容NestedScroll嵌套 源码实例
05-01
在Android应用开发中，创建一个类似美团详情页的滑动界面是一项常见的需求，这涉及到UI设计、触摸事件处理以及布局的嵌套滚动。本实例主要关注如何实现这一功能，并且确保与Nested Scroll（嵌套滚动）机制兼容。下面...
安卓Andriod源码——仿安卓美团界面.zip
10-13
【安卓Andriod源码——仿安卓美团界面】 在安卓Android平台上，开发一款应用程序与美团类似的界面是一项常见的挑战。美团作为国内知名的O2O（Online To Offline）服务平台，其用户界面设计简洁、功能丰富，是许多...
Android源码——仿facebook布局效果.zip
10-08
本压缩包"Android源码——仿facebook布局效果.zip"包含了实现这一效果的相关资源，包括图片和源代码。下面将详细介绍这个项目中的关键知识点。 1. **CoordinatorLayout**：Facebook布局的核心在于`...
Android源码——仿facebook布局效果.7z
10-08
本资源"Android源码——仿facebook布局效果.7z"提供了实现类似Facebook界面效果的Android源代码，这对于理解和学习Android高级布局设计非常有帮助。 首先，我们要理解Facebook的布局特点。Facebook的界面通常包含...
Android仿美团界面内容详情滑动效果.rar
07-10
Android仿美团界面内容详情滑动效果，并兼容NestedScroll嵌套，点击示例截图中所示的展开全部功能，可实现界面滑动显示效果，现在很流行的andorid机操作方式，用android的实现方法是什么呢？这个例子可以告诉你方法。下边的“展开全部”可以全部显示分类详情，有很多小特效值得用在你的Android应用开发中。
android 实现仿美团点菜页
01-11
android 实现仿美团点菜 先看博客：http://blog.csdn.net/mingzhnglei/article/details/54343043
仿美团详情页标题栏,标题栏透明度随滑动改变，头部展示图片拉伸收缩效果
03-02
标题栏透明度随滑动改变，头部展示图片拉伸收缩效果 标题栏透明度随滑动改变，头部展示图片拉伸收缩效果 标题栏透明度随滑动改变，头部展示图片拉伸收缩效果
Android中RecyclerView实现多级折叠列表效果（二）
08-30
主要给大家介绍了Android中RecyclerView实现多级折叠列表的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
Android仿 美团 / 饿了么，店铺详情页功能
Lan_Se_Tian_Ma的博客
11-25 2329
UI有所不同，但功能差不多。
android美团的购物车动画,仿美团详情页与购物车源码-订单页
weixin_35356909的博客
05-26 152
(function(){//订单卡片模版var itemTmpl = ''+''+ ''+''+''+'$poi_name'+''$status_description'+''+'$getProduct'+''+''+'$getComment'+'';/*** 渲染评价按钮* @param {}*/functiongetComment(data...
Android 高仿美团外卖详情页
子文的博客
11-24 7492
高仿美团外卖详情页，通过 CoordinatorLayout + 自定义 Behavior + 属性动画实现
Android TextView折叠展开效果实现
请注意，这种方法适用于文本内容动态加载或不确定的情况，如果文本内容在编译时已知，也可以考虑使用`android:ellipsize="end"`配合`android:maxLines`属性来实现简单的折叠效果。 总结，Android中实现TextView多...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值