devbox
木道寻08
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

AndroidFragment仿写美团外卖界面_android仿美团外卖首页

作者：木道寻08 | 2024-06-20 04:00:27

赞

踩

android仿美团外卖首页

使用fragment来实现页面的丝滑切换，为各大程序的界面做出了卓远的贡献！

今天分享的时之前课堂练习fragment的一个小作业，在没有学习接触fragment之前我实现点击图标来完成页面之间的来回切换主要时用intent方法来实现，我们知道intent函数的功能有很多，不仅可以实现页面的切换，数据的传递以及可以条用第三方的api等等，但在实现页面切换上面貌似表现的不太友好，故此需要适当条用fragment，基本上软件的到导航状态栏就是用fragment来实现的。

下面时该实验作业的具体代码，大家代码可以作为参考，如果需要项目的文件的也可以私信我，看到会第一时间回复。

activity_main.xml：主界面布局了顶部的点菜，商家，评论，好友拼单按钮控件，左（推荐和必买）右栏（显示菜的内容）fragment

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".MainActivity"
  8.     android:orientation="vertical">
  9.  
  10.  
  11. <RelativeLayout
  12.     android:layout_width="match_parent"
  13.     android:layout_height="50dp"
  14.     android:layout_marginBottom="4dp"
  15.     android:gravity="center_vertical"
  16.     >
  17.  
  18.     <TextView
  19.         android:id="@+id/tv_order"
  20.         android:layout_width="wrap_content"
  21.         android:layout_height="wrap_content"
  22.         android:layout_alignParentStart="true"
  23.         android:layout_alignParentLeft="true"
  24.         android:layout_alignParentTop="true"
  25.         android:layout_alignParentEnd="true"
  26.  
  27.         android:layout_alignParentRight="true"
  28.         android:layout_marginStart="25dp"
  29.         android:layout_marginLeft="25dp"
  30.         android:layout_marginTop="12dp"
  31.         android:layout_marginEnd="346dp"
  32.         android:layout_marginRight="346dp"
  33.         android:text="点菜"
  34.         android:textSize="20sp" />
  35.  
  36.     <TextView
  37.         android:id="@+id/tv_business"
  38.         android:layout_width="wrap_content"
  39.         android:layout_height="wrap_content"
  40.         android:layout_alignParentStart="true"
  41.         android:layout_alignParentLeft="true"
  42.         android:layout_alignParentTop="true"
  43.         android:layout_alignParentEnd="true"
  44.  
  45.         android:layout_alignParentRight="true"
  46.         android:layout_marginStart="108dp"
  47.         android:layout_marginLeft="108dp"
  48.         android:layout_marginTop="12dp"
  49.         android:layout_marginEnd="263dp"
  50.         android:layout_marginRight="263dp"
  51.         android:text="商家"
  52.         android:textSize="20sp" />
  53.  
  54.     <TextView
  55.         android:id="@+id/tv_discuss"
  56.         android:layout_width="wrap_content"
  57.         android:layout_height="wrap_content"
  58.         android:layout_alignParentStart="true"
  59.         android:layout_alignParentLeft="true"
  60.         android:layout_alignParentTop="true"
  61.         android:layout_alignParentEnd="true"
  62.  
  63.         android:layout_alignParentRight="true"
  64.         android:layout_marginStart="202dp"
  65.         android:layout_marginLeft="202dp"
  66.         android:layout_marginTop="11dp"
  67.         android:layout_marginEnd="169dp"
  68.         android:layout_marginRight="169dp"
  69.         android:text="评价"
  70.         android:textSize="20sp" />
  71.  
  72.     <TextView
  73.  
  74.         android:layout_width="wrap_content"
  75.         android:layout_height="wrap_content"
  76.         android:layout_alignParentTop="true"
  77.         android:layout_alignParentEnd="true"
  78.         android:layout_alignParentRight="true"
  79.         android:layout_marginTop="13dp"
  80.         android:layout_marginEnd="28dp"
  81.         android:layout_marginRight="28dp"
  82.         android:text="好友拼单"
  83.         android:textSize="20sp" />
  84. </RelativeLayout>
  85.  
  86.  
  87.  
  88.  
  89.  
  90.     <LinearLayout
  91.         android:layout_width="match_parent"
  92.         android:layout_height="match_parent"
  93.         android:orientation="horizontal"
  94.         >
  95.         <fragment
  96.             android:id="@+id/left"
  97.             android:name="com.example.menu.LeftFragment"
  98.             android:layout_width="wrap_content"
  99.             android:layout_height="match_parent"
  100.             android:layout_weight="1"
  101.  
  102.             tools:layout="@layout/fragment_left"/>
  103.         <fragment
  104.             android:id="@+id/right"
  105.             android:name="com.example.menu.RightFragment"
  106.             android:layout_width="wrap_content"
  107.             android:layout_height="match_parent"
  108.             android:layout_weight="3"
  109.             tools:layout="@layout/fragment_right"
  110.             />
  111.  
  112.  
  113.  
  114.     </LinearLayout>
  115. </LinearLayout>

FoodBean：Java文件实现对菜的基本信息（名称，内容，价钱，评论数等）的实例化

  1. package com.example.menu;
  2.  
  3. import java.io.Serializable;
  4.  
  5. public class FoodBean implements Serializable {
  6.     private static final long serialVersionUID=1L;
  7.     private String name;
  8.     private String sales;
  9.     private String price;
  10.     private int img;
  11.  
  12.     public String getName() {
  13.         return name;
  14.     }
  15.  
  16.     public void setName(String name) {
  17.         this.name = name;
  18.     }
  19.  
  20.     public String getSales() {
  21.         return sales;
  22.     }
  23.  
  24.     public void setSales(String sales) {
  25.         this.sales = sales;
  26.     }
  27.  
  28.     public String getPrice() {
  29.         return price;
  30.     }
  31.  
  32.     public void setPrice(String price) {
  33.         this.price = price;
  34.     }
  35.  
  36.     public int getImg() {
  37.         return img;
  38.     }
  39.  
  40.     public void setImg(int img) {
  41.         this.img = img;
  42.     }
  43. }

MainActivity：java文件，对主页面的数据内容以及控件的点击功能经行一个实现

  1. package com.example.menu;
  2.  
  3. import androidx.appcompat.app.AppCompatActivity;
  4. import androidx.fragment.app.FragmentTransaction;
  5.  
  6. import android.app.Fragment;
  7. import android.app.FragmentManager;
  8. import android.content.Intent;
  9. import android.graphics.Color;
  10. import android.os.Bundle;
  11. import android.view.View;
  12. import android.widget.Button;
  13. import android.widget.TextView;
  14.  
  15. import java.util.ArrayList;
  16. import java.util.HashMap;
  17. import java.util.List;
  18. import java.util.Map;
  19.  
  20. public class MainActivity extends AppCompatActivity {
  21. private FragmentManager fragmentManager;
  22. private FragmentTransaction fragmentTransaction;
  23. private Fragment leftFragment;
  24. private RightFragment rightFragment;
  25. private TextView tv_recommed,tv_must_buy;
  26. private TextView btn;
  27. private String[]names1={"爆款*肥牛鱼豆腐骨肉相连三荤五素一份米饭","豪华双人套餐","【热销】双人套餐（含两份米饭）","家乡菜爆炒花甲","家乡菜八仙过海","家乡菜迷魂汤","家乡菜小肉丸","家乡菜辣子鸡","家乡菜香辣龙虾"};
  28. private String[]sales1={"月售520 好评度80%","月售520 好评度80%","月售520 好评度80%","月售520 好评度80%","月售520 好评度80%","月售520 好评度80%","月售520 好评度80%","月售520 好评度80%","月售520 好评度80%"};
  29. private String[]prices1={"$23","$41","$32","$23","$41","$32","$23","$41","$32"};
  30. private int []imgs1={R.drawable.recom_one,R.drawable.recom_two,R.drawable.recom_three,R.drawable.recom_four,R.drawable.recom_five,R.drawable.recom_six,R.drawable.recom_seven,R.drawable.recom_eight,R.drawable.recom_nine};
  31.  
  32.  
  33.     private String[]names2={"素菜主义一人套餐","两人经典套套餐","三人经典套餐"};
  34.     private String[]sales2={"月售520 好评度80%","月售520 好评度80%","月售520 好评度80%"};
  35.     private String[]prices2={"$23","$41","$32"};
  36.     private int []imgs2={R.drawable.must_buy_one,R.drawable.must_buy_two,R.drawable.must_buy_three};
  37.  
  38.     private Map<String, List<FoodBean>>map;
  40.  
  41.     @Override
  42.     protected void onCreate(Bundle savedInstanceState) {
  43.         super.onCreate(savedInstanceState);
  44.         setContentView(R.layout.activity_main);
  45.         
  46.         setData();
  47.         init();
  48.         clickEvent();
  49.     }
  50.     private void init(){//给主页面左侧的fragment界面控件赋值
  51.  
  52.          fragmentManager = getFragmentManager();
  53.  
  54.         leftFragment=fragmentManager.findFragmentById(R.id.left);
  55.        tv_recommed=findViewById(R.id.tv_recommend);
  56.  
  57.         tv_must_buy=findViewById(R.id.tv_must_buy);
  58.  
  59.     }
  60.     private void setData(){//给数据赋值将其全部放在对应的数据集里
  61.         map=new HashMap<>();
  62.         List<FoodBean>list1=new  ArrayList<>();
  63.         List<FoodBean>list2=new ArrayList<>();
  64.         for(int i=0;i<names1.length;i++){
  65.             FoodBean bean=new FoodBean();
  66.             bean.setName(names1[i]);
  67.             bean.setPrice(prices1[i]);
  68.             bean.setImg(imgs1[i]);
  69.             bean.setSales(sales1[i]);
  70.             list1.add(bean);
  71.         }
  72.         map.put("1",list1);
  73.         for(int i=0;i<names2.length;i++){
  74.             FoodBean bean=new FoodBean();
  75.             bean.setName(names2[i]);
  76.             bean.setPrice(prices2[i]);
  77.             bean.setImg(imgs2[i]);
  78.             bean.setSales(sales2[i]);
  79.             list2.add(bean);
  80.         }
  81.         map.put("2",list2);
  82.  
  83.     }
  84.     private void clickEvent(){//点击推荐还在必须控件变化颜色，可以增加可适度
  85.         tv_recommed.setOnClickListener(new View.OnClickListener() {
  86.             @Override
  87.             public void onClick(View view) {
  88.                 switchData (map.get("1"));
  89.                tv_recommed.setBackgroundColor(Color.WHITE);
  90.             }
  91.         });
  92.         tv_must_buy.setOnClickListener(new View.OnClickListener() {
  93.             @Override
  94.             public void onClick(View view) {
  95.                 switchData (map.get("2"));
  96.                 tv_must_buy.setBackgroundColor(Color.WHITE);
  97.             }
  98.         });
  99.         switchData (map.get("1"));
  100.     }
  101.     public void switchData(List<FoodBean> list){
  102.         
  103.         rightFragment=new RightFragment().getInstance(list);//实例fragment
  104.  
  105.         fragmentManager=getFragmentManager();//获取FragmentManager
  106.  
  107.        fragmentTransaction=getSupportFragmentManager().beginTransaction();//开启事务
  108.        
  109.         fragmentTransaction.replace(R.id.right,rightFragment);//添加一个Fragment
  110.         
  111.  
  112.          fragmentTransaction.commit();//提交事务
  113.  
  114.     }
  115.  
  116.     }
  117.  
  118.

fragment_left.xml：布局文件，主页面左侧的推荐和必买fragment界面的布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     tools:context=".LeftFragment"
  7.  
  8.     android:orientation="vertical">
  9.  
  10.     <!-- TODO: Update blank fragment layout -->
  11.     <TextView
  12.         android:id="@+id/tv_recommend"
  13.         android:layout_width="wrap_content"
  14.         android:layout_height="wrap_content"
  15.         android:text="推荐"
  16.         android:textSize="25sp"
  17.         android:layout_marginTop="10dp"
  18.         android:layout_marginLeft="20dp"
  19.          />
  20.     <TextView
  21.         android:id="@+id/tv_must_buy"
  22.         android:layout_width="wrap_content"
  23.         android:layout_height="wrap_content"
  24.         android:text="进店必买"
  25.         android:textSize="25sp"
  26.         android:layout_marginTop="80dp"
  27.         android:layout_marginLeft="20dp"
  28.         />
  29. </FrameLayout>

fragment_right.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     tools:context=".RightFragment"
  7.     android:orientation="vertical">
  8.  
  9.     <!-- TODO: Update blank fragment layout -->
  10.  
  11. <ListView
  12.     android:id="@+id/lv_list"
  13.     android:layout_width="match_parent"
  14.     android:layout_height="wrap_content"
  15.     android:divider="@null"
  16.     />
  17. </FrameLayout>

list_item.xml：和fragment-right.xml共同结合实现对数据（菜的内容布局）的整体布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="horizontal"
  6.     android:padding="5dp"
  7.     >
  8.  
  9.  
  10. <ImageView
  11.     android:id="@+id/iv_img"
  12.     android:layout_width="70dp"
  13.     android:layout_height="70dp"/>
  14.     <LinearLayout
  15.         android:layout_width="match_parent"
  16.         android:layout_height="wrap_content"
  17.         android:layout_marginLeft="8dp"
  18.         android:layout_marginRight="8dp"
  19.         android:orientation="vertical"
  20.         >
  21.     <TextView
  22.         android:textSize="14sp"
  23.         android:padding="2dp"
  24.         android:id="@+id/tv_name"
  25.         android:layout_width="wrap_content"
  26.         android:layout_height="wrap_content"/>
  27.     <TextView
  28.         android:layout_width="wrap_content"
  29.         android:layout_height="wrap_content"
  30.         android:textColor="#868788"
  31.         android:id="@+id/tv_sale"
  32.  
  33.         android:textSize="12sp"/>
  34.     <TextView
  35.         android:id="@+id/tv_price"
  36.         android:layout_width="wrap_content"
  37.         android:layout_height="wrap_content"
  38.         android:layout_marginTop="2dp"
  39.  
  40.         android:textSize="12sp"/>
  41. </LinearLayout>
  42. </LinearLayout>

Right Adapter：菜的数据的适配器

  1. package com.example.menu;
  2.  
  3. import android.content.Context;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  6. import android.widget.BaseAdapter;
  7. import android.widget.ImageView;
  8. import android.widget.TextView;
  9.  
  10.  
  11. import java.util.List;
  12.  
  13. public class RightAdapter extends BaseAdapter {
  14.     private Context mContext;
  15.     private List<FoodBean>list;
  16.     public RightAdapter(Context context , List<FoodBean>list){
  17.         this.mContext=context;
  18.         this.list=list;
  19.     }
  20.     @Override
  21.     public int getCount() {
  22.         return list.size();
  23.     }
  24.  
  25.     @Override
  26.     public Object getItem(int position) {
  27.         return list.get(position);
  28.     }
  29.  
  30.     @Override
  31.     public long getItemId(int position) {
  32.         return position;
  33.     }
  34.  
  35.     @Override
  36.     public View getView(int position, View convertView, ViewGroup parent) {
  37.       ViewHolder holder=null;
  38.       if(convertView==null){
  39.           convertView=View.inflate(mContext,R.layout.list_item,null);
  40.           holder= new ViewHolder();
  41.           holder.tv_name=convertView.findViewById(R.id.tv_name);
  42.           holder.tv_sale=convertView.findViewById(R.id.tv_sale);
  43.           holder.tv_price=convertView.findViewById(R.id.tv_price);
  44.           holder.iv_img=convertView.findViewById(R.id.iv_img);
  45.           convertView.setTag(holder);
  46.       }else {
  47.           holder=(ViewHolder) convertView.getTag();
  48.       }
  49.       FoodBean bean=list.get(position);
  50.       holder.tv_name.setText(bean.getName());
  51.         holder.tv_sale.setText(bean.getSales());
  52.         holder.tv_price.setText(bean.getPrice());
  53.         holder.iv_img.setBackgroundResource(bean.getImg());
  54.       return convertView;
  55.     }
  56.     class ViewHolder{
  57.         TextView tv_name,tv_sale,tv_price;
  58.         ImageView iv_img;
  59.     }
  60. }

 截图：

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/738560
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号