当前位置:   article > 正文

Android Studio 模仿美团界面_android仿美团外卖首页

android仿美团外卖首页

目录

activity_main.xml

shouye_layout.xml

xiaoxi_layout.xml

Wode_layout.xml

首页里面的ListView

        food_item.xml

        Food

         FoodAdapter

        Shouye

消息界面中的机器人聊天功能:

        activity_robot.xml

        msg_item.xml

        Msg.java

        MsgAdapter.java

        Robot.java

        xiaoxi.java

 “我的”界面

        Wode.java

Activity.java

运行截图

工程文件


activity_main.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:background="#ffffff"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent">
  7. <FrameLayout
  8. android:id="@+id/main_frame_layout"
  9. android:layout_weight="1"
  10. android:layout_width="match_parent"
  11. android:layout_height="0dp">
  12. </FrameLayout>
  13. <LinearLayout
  14. android:layout_width="match_parent"
  15. android:layout_height="75dp">
  16. <Button
  17. android:id="@+id/btn1"
  18. android:layout_weight="1"
  19. android:layout_width="0dp"
  20. android:layout_height="match_parent"
  21. android:background="#ffffff"
  22. android:text="首页"
  23. android:textSize="20dp"/>
  24. <Button
  25. android:id="@+id/btn3"
  26. android:layout_weight="1"
  27. android:layout_width="0dp"
  28. android:layout_height="match_parent"
  29. android:background="#ffffff"
  30. android:text="消息"
  31. android:textSize="20dp"/>
  32. <Button
  33. android:id="@+id/btn4"
  34. android:layout_weight="1"
  35. android:layout_width="0dp"
  36. android:layout_height="match_parent"
  37. android:background="#ffffff"
  38. android:text="我的"
  39. android:textSize="20dp"/>
  40. </LinearLayout>
  41. </LinearLayout>

shouye_layout.xml

第一个fragment

(代码中涉及到的一些图片,大家可以自己命名一些相同的图片放到对应的文件夹中,或者更改相应的代码,也可以到文章底部的工程文件中下载)

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:background="#ffffff"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent">
  7. <FrameLayout
  8. android:id="@+id/main_frame_layout"
  9. android:layout_weight="1"
  10. android:layout_width="match_parent"
  11. android:layout_height="0dp">
  12. </FrameLayout>
  13. <LinearLayout
  14. android:layout_width="match_parent"
  15. android:layout_height="75dp">
  16. <Button
  17. android:id="@+id/btn1"
  18. android:layout_weight="1"
  19. android:layout_width="0dp"
  20. android:layout_height="match_parent"
  21. android:background="#ffffff"
  22. android:text="首页"
  23. android:textSize="20dp"/>
  24. <Button
  25. android:id="@+id/btn3"
  26. android:layout_weight="1"
  27. android:layout_width="0dp"
  28. android:layout_height="match_parent"
  29. android:background="#ffffff"
  30. android:text="消息"
  31. android:textSize="20dp"/>
  32. <Button
  33. android:id="@+id/btn4"
  34. android:layout_weight="1"
  35. android:layout_width="0dp"
  36. android:layout_height="match_parent"
  37. android:background="#ffffff"
  38. android:text="我的"
  39. android:textSize="20dp"/>
  40. </LinearLayout>
  41. </LinearLayout>

xiaoxi_layout.xml

第二个fragment

(代码中涉及到的一些图片,大家可以自己命名一些相同的图片放到对应的文件夹中,或者更改相应的代码,也可以到文章底部的工程文件中下载)

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:background="#ffffff"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent">
  7. <FrameLayout
  8. android:id="@+id/main_frame_layout"
  9. android:layout_weight="1"
  10. android:layout_width="match_parent"
  11. android:layout_height="0dp">
  12. </FrameLayout>
  13. <LinearLayout
  14. android:layout_width="match_parent"
  15. android:layout_height="75dp">
  16. <Button
  17. android:id="@+id/btn1"
  18. android:layout_weight="1"
  19. android:layout_width="0dp"
  20. android:layout_height="match_parent"
  21. android:background="#ffffff"
  22. android:text="首页"
  23. android:textSize="20dp"/>
  24. <Button
  25. android:id="@+id/btn3"
  26. android:layout_weight="1"
  27. android:layout_width="0dp"
  28. android:layout_height="match_parent"
  29. android:background="#ffffff"
  30. android:text="消息"
  31. android:textSize="20dp"/>
  32. <Button
  33. android:id="@+id/btn4"
  34. android:layout_weight="1"
  35. android:layout_width="0dp"
  36. android:layout_height="match_parent"
  37. android:background="#ffffff"
  38. android:text="我的"
  39. android:textSize="20dp"/>
  40. </LinearLayout>
  41. </LinearLayout>

Wode_layout.xml

第三个fragment

(代码中涉及到的一些图片,大家可以自己命名一些相同的图片放到对应的文件夹中,或者更改相应的代码,也可以到文章底部的工程文件中下载)

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:orientation="vertical"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent">
  5. <LinearLayout
  6. android:layout_width="match_parent"
  7. android:layout_height="180dp"
  8. android:background="#ffcc33"
  9. android:orientation="vertical">
  10. <LinearLayout
  11. android:layout_width="match_parent"
  12. android:layout_height="wrap_content">
  13. <ImageView
  14. android:layout_width="wrap_content"
  15. android:layout_height="wrap_content"
  16. android:layout_marginTop="25dp"
  17. android:layout_marginLeft="25dp"
  18. android:src="@drawable/touxiang"/>
  19. <TextView
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:layout_marginTop="35dp"
  23. android:layout_marginLeft="25dp"
  24. android:text="是我哦"
  25. android:textSize="25dp"/>
  26. <TextView
  27. android:layout_width="wrap_content"
  28. android:layout_height="wrap_content"
  29. android:layout_marginTop="35dp"
  30. android:layout_marginLeft="25dp"
  31. android:text="假装有id"
  32. android:textSize="25dp"/>
  33. <ImageView
  34. android:layout_width="wrap_content"
  35. android:layout_height="wrap_content"
  36. android:layout_marginLeft="130dp"
  37. android:src="@drawable/shezhi"/>
  38. <ImageView
  39. android:layout_width="wrap_content"
  40. android:layout_height="wrap_content"
  41. android:src="@drawable/kefu"/>
  42. </LinearLayout>
  43. <LinearLayout
  44. android:layout_width="match_parent"
  45. android:layout_height="wrap_content"
  46. android:orientation="horizontal"
  47. android:layout_marginTop="10dp">
  48. <ImageView
  49. android:layout_width="200px"
  50. android:layout_height="200px"
  51. android:src="@drawable/sc"
  52. android:layout_weight="1"/>
  53. <ImageView
  54. android:layout_width="200px"
  55. android:layout_height="200px"
  56. android:src="@drawable/pj"
  57. android:layout_weight="1"/>
  58. <ImageView
  59. android:layout_width="200px"
  60. android:layout_height="200px"
  61. android:src="@drawable/zj"
  62. android:layout_weight="1"/>
  63. <ImageView
  64. android:layout_width="200px"
  65. android:layout_height="200px"
  66. android:src="@drawable/kq"
  67. android:layout_weight="1"/>
  68. </LinearLayout>
  69. </LinearLayout>
  70. </LinearLayout>

首页里面的ListView

        food_item.xml

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:orientation="horizontal"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent">
  5. <ImageView
  6. android:id="@+id/food_image"
  7. android:layout_width="wrap_content"
  8. android:layout_height="wrap_content"/>
  9. <TextView
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:id="@+id/food_name"
  13. android:textSize="20dp"
  14. android:layout_gravity="center_vertical"
  15. android:layout_marginLeft="10dp"/>
  16. </LinearLayout>

        Food

        在包内创建一个Java类并命名为Food,写入如下代码:

  1. public class Food {
  2. private String name;
  3. private int imageId;
  4. public Food(String name, int imageId) {
  5. this.name = name;
  6. this.imageId = imageId;
  7. }
  8. public String getName() {
  9. return name;
  10. }
  11. public int getImageId() {
  12. return imageId;
  13. }
  14. }

         FoodAdapter

        在包内创建一个Java类并命名为FoodAdapter,写入如下代码:

  1. public class FoodAdapter extends ArrayAdapter<Food> {
  2. private int resourceId;
  3. public FoodAdapter(Context context, int textViewResourceId,
  4. List<Food> objects){
  5. super(context, textViewResourceId, objects);
  6. resourceId = textViewResourceId;
  7. }
  8. @Override
  9. public View getView(int position, View convertView, ViewGroup parent){
  10. Food food = getItem(position);
  11. View view = LayoutInflater.from(getContext()).inflate(resourceId,parent,false);
  12. ImageView foodImage = (ImageView) view.findViewById(R.id.food_image);
  13. TextView foodname = (TextView) view.findViewById(R.id.food_name);
  14. foodImage.setImageResource(food.getImageId());
  15. foodname.setText(food.getName());
  16. return view;
  17. }
  18. }

        Shouye

        在包内创建一个Java类并命名为Shouye,写入如下代码:

(代码中涉及到的一些图片,大家可以自己命名一些相同的图片放到对应的文件夹中,或者更改相应的代码,也可以到文章底部的工程文件中下载)

  1. public class Shouye extends Fragment implements AdapterView.OnItemClickListener {
  2. ListView listView;
  3. SimpleAdapter simpleAdapter;
  4. @Override
  5. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  6. Bundle savedInstanceState) {
  7. View view = inflater.inflate(R.layout.shouye_layout, container, false);
  8. listView = view.findViewById(R.id.list_view);
  9. simpleAdapter = new SimpleAdapter(getActivity(),getData(),R.layout.food_item,
  10. new String[]{"title","image"},new int[]{R.id.food_name,R.id.food_image});
  11. listView.setAdapter(simpleAdapter);
  12. listView.setOnItemClickListener(this);
  13. return view;
  14. }
  15. private List<Map<String,Object>> getData(){
  16. String [] title = {"井盒炒饭","全鸡汉堡","小煎鸡饭","猪脚饭"};
  17. int [] image = {R.drawable.chaofan,R.drawable.hls,R.drawable.xcj,R.drawable.zjf};
  18. List<Map<String,Object>> list = new ArrayList<>();
  19. for (int j=0;j<5;j++){
  20. for (int i=0;i<4;i++){
  21. Map map = new HashMap();
  22. map.put("title",title[i]);
  23. map.put("image",image[i]);
  24. list.add(map);
  25. }
  26. }
  27. return list;
  28. }
  29. @Override
  30. public void onActivityCreated(@Nullable Bundle savedInstanceState) {
  31. super.onActivityCreated(savedInstanceState);
  32. }
  33. @Override
  34. public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
  35. }
  36. }

消息界面中的机器人聊天功能:

        activity_robot.xml

  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. android:orientation="vertical"
  8. android:background="#d8e0e8"
  9. tools:context=".MainActivity">
  10. <androidx.recyclerview.widget.RecyclerView
  11. android:id="@+id/msg_recycler_view"
  12. android:layout_width="match_parent"
  13. android:layout_height="0dp"
  14. android:layout_weight="1"/>
  15. <LinearLayout
  16. android:layout_width="match_parent"
  17. android:layout_height="wrap_content">
  18. <EditText
  19. android:id="@+id/input_text"
  20. android:layout_width="0dp"
  21. android:layout_height="wrap_content"
  22. android:layout_weight="1"
  23. android:maxLines="2"
  24. android:hint="输入信息"/>
  25. <Button
  26. android:id="@+id/send"
  27. android:layout_width="wrap_content"
  28. android:layout_height="wrap_content"
  29. android:text="发送"/>
  30. </LinearLayout>
  31. </LinearLayout>

         msg_item.xml

(代码中涉及到的一些图片,大家可以自己命名一些相同的图片放到对应的文件夹中,或者更改相应的代码,也可以到文章底部的工程文件中下载)

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:orientation="vertical"
  5. android:layout_width="match_parent"
  6. android:layout_height="wrap_content"
  7. android:padding="10dp">
  8. <LinearLayout
  9. android:id="@+id/left_layout"
  10. android:layout_gravity="left"
  11. android:layout_width="wrap_content"
  12. android:layout_height="wrap_content"
  13. android:orientation="horizontal"
  14. android:background="@mipmap/message_left">
  15. <TextView
  16. android:id="@+id/left_msg"
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:layout_gravity="center"
  20. android:layout_margin="10dp"
  21. android:textColor="#fff"
  22. android:text="你好,小明"/>
  23. </LinearLayout>
  24. <LinearLayout
  25. android:id="@+id/right_layout"
  26. android:orientation="horizontal"
  27. android:layout_width="wrap_content"
  28. android:layout_height="wrap_content"
  29. android:background="@mipmap/message_right"
  30. android:layout_gravity="right">
  31. <TextView
  32. android:id="@+id/right_msg"
  33. android:layout_width="wrap_content"
  34. android:layout_height="wrap_content"
  35. android:layout_gravity="center"
  36. android:layout_margin="10dp"
  37. android:text="我杀你妈"
  38. />
  39. </LinearLayout>
  40. </LinearLayout>

        Msg.java

        在包内创建一个Java类文件,命名为Msg,写入如下代码:

  1. package com.example.meituanapplication;
  2. public class Msg {
  3. public static final int TYPE_RECEIVED = 0;
  4. public static final int TYPE_SENT = 1;
  5. // 消息内容
  6. private String content;
  7. // 消息类型
  8. private int type;
  9. public Msg(String content,int type){
  10. this.content = content;
  11. this.type = type;
  12. }
  13. public int getType(){
  14. return type;
  15. }
  16. public String getContent(){
  17. return content;
  18. }
  19. public void setContent(String content){
  20. this.content = content;
  21. }
  22. public void setType(int type){
  23. this.type = type;
  24. }
  25. }

         MsgAdapter.java

        在包内创建一个Java类文件,命名为MsgAdapter,写入如下代码:

  1. public class MsgAdapter extends RecyclerView.Adapter<MsgAdapter.ViewHolder> {
  2. private List<Msg> mMsgList;
  3. static class ViewHolder extends RecyclerView.ViewHolder{
  4. LinearLayout leftLayout;
  5. LinearLayout rightLayout;
  6. TextView leftMsg;
  7. TextView rightMsg;
  8. public ViewHolder(View view){
  9. super(view);
  10. leftLayout = (LinearLayout) view.findViewById(R.id.left_layout);
  11. rightLayout = (LinearLayout) view.findViewById(R.id.right_layout);
  12. leftMsg = (TextView) view.findViewById(R.id.left_msg);
  13. rightMsg = (TextView) view.findViewById(R.id.right_msg);
  14. }
  15. }
  16. public MsgAdapter(List<Msg> msgList){
  17. mMsgList = msgList;
  18. }
  19. @Override
  20. public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType){
  21. View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.msg_item,parent,false);
  22. return new ViewHolder(view);
  23. }
  24. @Override
  25. public void onBindViewHolder(ViewHolder holder,int position){
  26. Msg msg = mMsgList.get(position);
  27. if (msg.getType() == Msg.TYPE_RECEIVED) {
  28. holder.leftLayout.setVisibility(View.VISIBLE);
  29. holder.rightLayout.setVisibility(View.GONE);
  30. holder.leftMsg.setText(msg.getContent());
  31. }else if (msg.getType() == Msg.TYPE_SENT){
  32. holder.rightLayout.setVisibility(View.VISIBLE);
  33. holder.leftLayout.setVisibility(View.GONE);
  34. holder.rightMsg.setText(msg.getContent());
  35. }
  36. }
  37. @Override
  38. public int getItemCount() {
  39. return mMsgList.size();
  40. }
  41. }

        Robot.java

        在包内创建一个Java类文件,命名为Robot,写入如下代码:

  1. public class Robot extends AppCompatActivity {
  2. private List<Msg> msgList = new ArrayList<>();
  3. private EditText inputText;
  4. private Button send;
  5. private RecyclerView msgRecyclerView;
  6. private MsgAdapter adapter;
  7. @Override
  8. protected void onCreate(Bundle savedInstanceState) {
  9. super.onCreate(savedInstanceState);
  10. setContentView(R.layout.activity_robot);
  11. initMsgs();//初始化消息数据
  12. inputText = (EditText) findViewById(R.id.input_text);
  13. send = (Button) findViewById(R.id.send);
  14. msgRecyclerView = (RecyclerView) findViewById(R.id.msg_recycler_view);
  15. LinearLayoutManager layoutManager = new LinearLayoutManager(this);
  16. msgRecyclerView.setLayoutManager(layoutManager);
  17. adapter = new MsgAdapter(msgList);
  18. msgRecyclerView.setAdapter(adapter);
  19. send.setOnClickListener(new View.OnClickListener() {
  20. @Override
  21. public void onClick(View v) {
  22. String content = inputText.getText().toString();
  23. if (!"".equals(content)) {
  24. Msg msg = new Msg(content,Msg.TYPE_SENT);
  25. msgList.add(msg);
  26. adapter.notifyItemInserted(msgList.size() - 1);
  27. msgRecyclerView.scrollToPosition(msgList.size() - 1);
  28. inputText.setText("");
  29. }
  30. }
  31. });
  32. }
  33. private void initMsgs() {
  34. Msg msg1 = new Msg("long may the sun shine!",Msg.TYPE_RECEIVED);
  35. msgList.add(msg1);
  36. Msg msg2 = new Msg("you are dragon, more dragon thsn me.",Msg.TYPE_SENT);
  37. msgList.add(msg2);
  38. Msg msg3 = new Msg("如果你是龙,也好",Msg.TYPE_RECEIVED);
  39. msgList.add(msg3);
  40. }
  41. }

         xiaoxi.java

         在包内创建一个Java类文件,命名为Robot,写入如下代码:

  1. public class Xiaoxi extends Fragment {
  2. @Override
  3. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  4. Bundle savedInstanceState) {
  5. View view = inflater.inflate(R.layout.xiaoxi_layout, container, false);
  6. LinearLayout nx = view.findViewById(R.id.xiaoxi_nie);
  7. nx.setOnClickListener(new View.OnClickListener() {
  8. @Override
  9. public void onClick(View v) {
  10. Intent intent = new Intent(getActivity(),Robot.class);
  11. startActivity(intent);
  12. }
  13. });
  14. return view;
  15. }
  16. }

 “我的”界面

        Wode.java

        在包内创建一个Java类文件,命名为Wode,写入如下代码:

  1. public class Wode extends Fragment {
  2. @Override
  3. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  4. Bundle savedInstanceState) {
  5. View view = inflater.inflate(R.layout.wode_layout, container, false);
  6. return view;
  7. }
  8. }

Activity.java

最后是主要的活动的代码:

  1. public class MainActivity extends AppCompatActivity implements View.OnClickListener{
  2. //三个fragment
  3. private Shouye f1;
  4. private Xiaoxi f2;
  5. private Wode f3;
  6. //底部三个按钮
  7. private Button foot1;
  8. private Button foot2;
  9. private Button foot3;
  10. @Override
  11. protected void onCreate(Bundle savedInstanceState) {
  12. super.onCreate(savedInstanceState);
  13. setContentView(R.layout.activity_main);
  14. foot1 = (Button) findViewById(R.id.btn1);
  15. foot2 = (Button) findViewById(R.id.btn3);
  16. foot3 = (Button) findViewById(R.id.btn4);
  17. foot1.setOnClickListener(this);
  18. foot2.setOnClickListener(this);
  19. foot3.setOnClickListener(this);
  20. //第一次初始化首页默认显示第一个fragment
  21. initShouye();
  22. }
  23. //显示第一个fragment
  24. private void initShouye(){
  25. FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
  26. if (f1 == null){
  27. f1 = new Shouye();
  28. transaction.add(R.id.main_frame_layout,f1);
  29. }
  30. hideFragment(transaction);
  31. transaction.show(f1);
  32. transaction.commit();
  33. }
  34. //显示第二个fragment
  35. private void initXiaoxi(){
  36. FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
  37. if(f2 == null){
  38. f2 = new Xiaoxi();
  39. transaction.add(R.id.main_frame_layout,f2);
  40. }
  41. hideFragment(transaction);
  42. transaction.show(f2);
  43. transaction.commit();
  44. }
  45. //显示第三个fragment
  46. private void initWode(){
  47. FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
  48. if(f3 == null){
  49. f3 = new Wode();
  50. transaction.add(R.id.main_frame_layout,f3);
  51. }
  52. hideFragment(transaction);
  53. transaction.show(f3);
  54. transaction.commit();
  55. }
  56. //隐藏所有的fragment
  57. private void hideFragment(FragmentTransaction transaction){
  58. if(f1 != null){
  59. transaction.hide(f1);
  60. }
  61. if(f2 != null){
  62. transaction.hide(f2);
  63. }
  64. if(f3 != null){
  65. transaction.hide(f3);
  66. }
  67. }
  68. @Override
  69. public void onClick(View v) {
  70. if(v == foot1){
  71. initShouye();
  72. }else if(v == foot2){
  73. initXiaoxi();
  74. }else if(v == foot3){
  75. initWode();
  76. }
  77. }
  78. }

运行截图

    

    

工程文件

下面是整个项目工程的文件压缩包,如果需要的话可以通过积分下载:

AndroidStudio模仿美团界面-Android文档类资源-CSDN下载用AndroidStudio模仿美团界面做一个app更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/nazonomaster/85219998

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

闽ICP备14008679号