黑马外卖笔记(三)

最新推荐文章于 2024-04-08 22:12:11 发布

ChatHello

最新推荐文章于 2024-04-08 22:12:11 发布

阅读量2.4k

点赞数

分类专栏：外卖笔记

本文链接：https://blog.csdn.net/ChatHello/article/details/69486548

版权

本文介绍了Android开发中如何利用bottomSheet实现底部菜单效果，以及使用stickylistheaders实现列表分组和头部固定，详细讲解了相关控件的使用、布局配置、点击事件处理和数据加载。同时，还涵盖了商铺页面的UI设计，包括BottomSheet的运用和购物车功能的实现，如添加、删除购物车商品的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 掌握bottomSheet，开发购物车

l 项目效果

l 控件运行效果

[开源控件库]https://github.com/Flipboard/bottomsheet

第三方开源控件库，可以快速实现类似底部菜单的效果(类似安全卫士-归属地风格选择Dialog)

使用步骤

>1.依赖

compile'com.flipboard:bottomsheet-commons:1.5.1'
compile 'com.flipboard:bottomsheet-core:1.5.1'

>2.布局页面内容

layout/activity_main.xml

<?xml version="1.0"encoding="utf-8"?>
<com.flipboard.bottomsheet.BottomSheetLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/bottom_sheet_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:onClick="show"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="三"/>
    </LinearLayout>
</com.flipboard.bottomsheet.BottomSheetLayout>

>3.布局弹出内容

layout/pop_sheet.xml

>4.编写显示与隐藏逻辑

public classMainActivityextends AppCompatActivity {

    privateBottomSheetLayoutbottomSheetLayout;
    privateView popView;

    @Override
    protected voidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //查找控件
        bottomSheetLayout= (BottomSheetLayout) findViewById(R.id.bottom_sheet_layout);
    }

    public voidshow(View view) {
        //判断弹出内容是否可见
        if(bottomSheetLayout.isSheetShowing()) {
            //可见则隐藏
            bottomSheetLayout.dismissSheet();
        } else {
            if(popView== null) {
                popView= LayoutInflater.from(this).inflate(R.layout.pop_sheet,bottomSheetLayout,false);
            }
            //不可见则显示，对popView进行是否为空判断可以减少view的创建
            bottomSheetLayout.showWithSheetView(popView);
        }
    }
}

2. 掌握stickylistheaders,使用tabs滑动固定

l 运行效果

【开源控件库】https://github.com/emilsjolander/StickyListHeaders

将元素按照typeId进行组，相同typeId的元素在一个分组。

组视图可以上滑到达顶部固定住(类似联系人效果)

>1.依赖

compile'se.emilsjolander:stickylistheaders:2.7.0'

>2.布局UI

layout/activity_main.xml

<?xml version="1.0"encoding="utf-8"?>
<se.emilsjolander.stickylistheaders.StickyListHeadersListViewxmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/stick_headers_lv"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

layout/item_header.xml

<?xml version="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.itheima.appstickyheader.MainActivity">
<TextView
    android:id="@+id/title"
    android:layout_width="match_parent"
    android:text="标题"
    android:padding="10dp"
    android:background="#FFF000"
    android:layout_height="wrap_content"/>
</RelativeLayout>

layout/item.xml

<?xml version="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.itheima.appstickyheader.MainActivity">
<TextView
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:text="条目"
    android:textSize="22sp"
    android:padding="10dp"
    android:layout_height="wrap_content"/>
</RelativeLayout>

>3.创建带有typeId的记录

//数据模型
public classInfo {
    private inttypeId;
    privateString typeName;
    privateString content;
    //typeId相同的id代表同一个组的元素
    //typeName组名
    //content元素名
    publicInfo(inttypeId, String typeName, String content) {
        this.typeId= typeId;
        this.typeName= typeName;
        this.content= content;
    }省略get/set

>4使用适配器进行初始化

public classMainActivityextends AppCompatActivity {

    @InjectView(R.id.stick_headers_lv)
    StickyListHeadersListViewstickHeadersLv;
    privateList<Info>mData = null;
    @Override
    protected voidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);
        mData= new ArrayList<>();
        for(inti = 0; i <5; i++) {
            for(intj = 0; j <10; j++) {
                mData.add(newInfo(i, "组名" + i,"成员" + i + "--"+ j));
            }
        }
        MyAdapter adapter =new MyAdapter();
        stickHeadersLv.setAdapter(adapter);
    }

>5.实现适配器

private classMyAdapterextends BaseAdapter implements StickyListHeadersAdapter {
    //组
    @Override
    publicView getHeaderView(intposition, View convertView, ViewGroup parent) {
        if(convertView ==null) {
            convertView = View.inflate(parent.getContext(), R.layout.item_header,null);
        }
        TextView text = (TextView) convertView.findViewById(R.id.title);
        Info info =mData.get(position);
        text.setText(info.getTypeName());
        returnconvertView;
    }
    //元素
    @Override
    publicView getView(intposition, View convertView, ViewGroup parent) {
        if(convertView ==null) {
            convertView = View.inflate(parent.getContext(), R.layout.item,null);
        }
        TextView text = (TextView) convertView.findViewById(R.id.text);
        Info info =mData.get(position);
        text.setText(info.getContent());
        returnconvertView;
    }
    //按typeid分组
    @Override
    public longgetHeaderId(intposition) {
        returnmData.get(position).getTypeId();
    }

    @Override
    public intgetCount() {
        returnmData.size();
    }

3. 进入到商铺页面，选餐

3.1. 给条目添加点击事件,Intent打开BusinessActivity

com.itheima.app_.ui.adapter.HeaderAdapter

>1.添加点击事件,意图打开页面

在com.itheima.app_.ui.adapter.HeaderAdapter#onBindViewHolder方法中

//添加点击事件跳转到商铺页面
hd.itemView.setOnClickListener(newView.OnClickListener() {
    @Override
    public voidonClick(View v) {

        Intent intent=newIntent(v.getContext(),BussinessActivity.class);
        intent.putExtra("item",item);
        v.getContext().startActivity(intent);
    }
});

注意事项:

Intent传递javaBean要求这个对象序列化

l BodyInfo序列化

l SellerInfo序列化

3.2. 创建BusinessActivity界面

>1.配置

<activityandroid:name=".ui.activity.BussinessActivity"/>

>2.创建页面

public classBussinessActivityextends BaseActivity {
    @Override
    protected voidonCreate(@NullableBundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //给手机状态栏着色
        initSystemBar()

}

>3.布局UI

3.3. 整体界面UI分析(引入BottomSheet)

   //底部弹出窗体
    compile'com.flipboard:bottomsheet-commons:1.5.1'
    compile'com.flipboard:bottomsheet-core:1.5.1'

layout/activity_bussiness.xml

<?xml version="1.0"encoding="utf-8"?>
<LinearLayoutxmlns: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"
    android:orientation="vertical"
    android:fitsSystemWindows="true"
    android:clipToPadding="false">
    
    <com.flipboard.bottomsheet.BottomSheetLayout
        android:id="@+id/bottom_sheet_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        
           <LinearLayout
               android:layout_width="match_parent"
               android:orientation="vertical"
               android:layout_height="match_parent">
                
              <includelayout="@layout/include_titlebar"/>
                
               <includelayout="@layout/include_tabs_viewpager"/>
           </LinearLayout>
    </com.flipboard.bottomsheet.BottomSheetLayout>
    
    <includelayout="@layout/include_bottom"/>
</LinearLayout>

可以使用include知识点，将布局好的内容引入，这样页面结构更清析

3.4. 使用include引入标题

layout/include_titlebar.xml

<?xml version="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#f6f89191"
    android:orientation="horizontal"
    android:paddingBottom="10dp"
    android:paddingTop="25dp">
    <ImageButton
        android:id="@+id/ib_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"
        android:background="@mipmap/ic_back"/>
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:maxLines=

最低0.47元/天解锁文章