赞
踩
作业1: App门户页面设计与开发
1、请根据课程内容设计一个app的门户框架,需要实现3-4个tab切换效果;本功能要求需要的技术为:activity、xml、fragment
2、在任一tab页中实现列表效果;本功能的实现需要使用recycleview;
一.设计目标:
1.完成基本的微信页面布局设计,包括顶部显示栏,和底部导航栏(四个tab页包括微信、朋友、发现、我)。
2.利用fragment(分段)、activity完善门户页面的框架设计,实现四个页面的切换,点击相应的导航键,便可以切换到该页面,相应的图标也发生改变,并对控件进行监听。
二.设计流程:
1.制作底部导航栏bottom.xml
点击 res-layout 新建xml文件
bottom平均分成四块,每块由一个图片和一个文字构成。可以用水平的LinearLayout中再包裹一个竖直的LinearLayout,被包裹的每个LinearLayout里包含一个ImageButton和TextView控件。
准备两组八张图标存放在res-drawable。
添加bottom.xml配置代码:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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="100dp" android:background="@color/purple_200" android:clickable="false" android:orientation="horizontal"> <LinearLayout android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:clickable="true" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/imageView1" android:layout_width="match_parent" android:layout_height="57dp" android:src="@drawable/a_original" tools:srcCompat="@drawable/a_original" /> <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="微信" android:textColor="@color/black" android:textSize="23sp" /> </LinearLayout> <LinearLayout android:id="@+id/linearlayout2" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:clickable="true" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/imageView2" android:layout_width="103dp" android:layout_height="60dp" android:src="@drawable/b_original" tools:srcCompat="@drawable/b_original" /> <TextView android:id="@+id/textView2" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="朋友" android:textColor="@color/black" android:textSize="23sp" /> </LinearLayout> <LinearLayout android:id="@+id/linearlayout3" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:clickable="true" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/imageView3" android:layout_width="103dp" android:layout_height="63dp" android:src="@drawable/c_original" tools:srcCompat="@drawable/c_original" /> <TextView android:id="@+id/textView3" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="发现" android:textColor="@color/black" android:textSize="23sp" /> </LinearLayout> <LinearLayout android:id="@+id/linearlayout4" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:clickable="true" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/imageView4" android:layout_width="match_parent" android:layout_height="62dp" android:src="@drawable/d_original" tools:srcCompat="@drawable/d_original" /> <TextView android:id="@+id/textView4" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="我" android:textColor="@color/black" android:textSize="23sp" /> </LinearLayout> </LinearLayout>
代码解析:
外部LinearLayout:android:orientation=“horizontal”,布局中组件的排列方式,有horizontal(水平)和vertical(垂直)两种方式。
内部ImageView:tools:srcCompat="@drawable",vector绘制图片的地址。
功能说明(布局展示):
2.制作顶部的top.xml,在res-layout新建一个xml文件:
top.xml的配置代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/purple_200">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="微信"
android:textColor="@color/black"
android:textSize="30sp" />
</LinearLayout>
代码解析:
android:id="@+id/textView2",为组件设置一个资源id,在java文件中可以通过findViewById(id)找到该组件。
android:layout_width=“wrap_content”,布局的宽度,通常不直接写数字,用wrap_content(组件实际大小),fill_parent或者match_parent填满父容器。
android:layout_height=“wrap_content”,布局的高度,参数同上。
android:layout_weight=“1”,用来等比例地划分区域。
android:background="@color/purple_200",为组件设置一个背景图片,或者直接用颜色覆盖。
android:gravity=“center”,表示textView中的文字相对于TextView的对齐方式。
android:text=“微信”,要显示的文字。
android:textColor="@color/black",设置文字的颜色。
android:textSize=“30sp” />,设置文字的大小。
功能说明(布局展示):
3.activity_main的配置
添加activity_main.xml代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<include layout="@layout/top"/>
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom" />
</LinearLayout>
代码解析:
相关的属性作用和bottom.xml以及top.xml类似。
功能说明(布局展示):
对主页面显示的内容布局。整个主页面使用竖直的LinerLayout,将top.xml和bottom.xml导入,以及中间内容content(对应Fragment)。
4.创建Fragment
在java目录下创建四个fragment类,Fragment1(微信)、Fragment2(朋友)、3Fragment(发现)、Fragment4(我),系统会自动在res-layout目录下生成四个对应的xml文件(可自主命名),对应bottom的四个按钮。
以kFragment1(朋友)为例,配置相关代码
package Com.example.project1; import android.os.Bundle; import androidx.fragment.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Fragment1 extends Fragment { public Fragment1() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_1, container, false); } }
配置Fragment1对应的xml文件代码
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: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" tools:context=".Fragment1"> <!-- TODO: Update blank fragment layout --> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="微信界面" android:textSize="30sp"/> </LinearLayout>
5.配置MainActivity
5.1声明所需要的变量
private Fragment hTab01 = new Fragment1(); private Fragment hTab02 = new Fragment2(); private Fragment hTab03 = new Fragment3(); private Fragment hTab04 = new Fragment4(); private LinearLayout hTabWeChat; private LinearLayout hTabFrd; private LinearLayout hTabContact; private LinearLayout hTabMe; private ImageView imageWeixin,imagepengyou,imagefaxian, imagewo; private FragmentManager fm; private TextView textView;
代码解析:
Fragment变量:对应创建的Fragment ,FragmentManager变量:管理Fragment的类
ImageView变量:对应之前创建的ImageView,LinearLayout变量:对应之前创建的LinearLayout
5.2 利用FragmentManager对Fragment进行管理,实现页面切换
将所有的Fragment添加进去:
private void initFragment() {
fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
transaction.add(R.id.content, hTab01);
transaction.add(R.id.content, hTab02);
transaction.add(R.id.content, hTab03);
transaction.add(R.id.content, hTab04);
transaction.commit();
}
页面的切换(功能):
private void showfragment(int i){ FragmentTransaction transaction=fm.beginTransaction(); hideFragment(transaction); switch (i){ case 0: textView.setText("微信"); transaction.show(hTab01); imageWeixin.setImageResource(R.drawable.a_original); break; case 1: textView.setText("朋友"); transaction.show(hTab02); imagepengyou.setImageResource(R.drawable.b_original); break; case 2: textView.setText("发现"); transaction.show(hTab03); imagefaxian.setImageResource(R.drawable.c_original); break; case 3: textView.setText("我"); transaction.show(hTab04); imagewo.setImageResource(R.drawable.d_original); break; default: break; } transaction.commit(); }
为了使所有Fragment不会发生重叠,将所有Fragment都隐藏(功能):
private void hideFragment(FragmentTransaction transaction) { transaction.hide(hTab01); transaction.hide(hTab02); transaction.hide(hTab03); transaction.hide(hTab04); }
5.3 完成事件的触发
事件触发代码:
private void initEvent() {
hTabWeChat.setOnClickListener(this);
hTabFrd.setOnClickListener(this);
hTabContact.setOnClickListener(this);
hTabMe.setOnClickListener(this);
}
点击相应按钮的响应函数
public void onClick(View v) { resetImage(); int viewId = v.getId(); if (viewId == R.id.linearlayout1) { showfragment(0); } else if (viewId == R.id.linearlayout2) { showfragment(1); } else if (viewId == R.id.linearlayout3) { showfragment(2); } else if (viewId == R.id.linearlayout4) { showfragment(3); } }
5.4 实现点击后的按钮切换
public void resetImage(){ imageWeixin.setImageResource(R.drawable.a_original); imagepengyou.setImageResource(R.drawable.b_original); imagefaxian.setImageResource(R.drawable.c_original); imagewo.setImageResource(R.drawable.d_original); }
5.5 主函数调用
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); textView=findViewById(R.id.textView2); hTabWeChat =findViewById(R.id.linearlayout1); hTabFrd =findViewById(R.id.linearlayout2); hTabContact =findViewById(R.id.linearlayout3); hTabMe =findViewById(R.id.linearlayout4); imageWeixin=findViewById(R.id.imageView1); imagepengyou=findViewById(R.id.imageView2); imagefaxian=findViewById(R.id.imageView3); imagewo =findViewById(R.id.imageView4); initEvent(); initFragment(); showfragment(0); }
5.6 完整的MainActivity代码
package Com.example.project1; import android.annotation.SuppressLint; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentTransaction; import android.os.Bundle; import android.view.View; import android.view.Window; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; public class MainActivity extends AppCompatActivity implements View.OnClickListener { private Fragment hTab01 = new Fragment1(); private Fragment hTab02 = new Fragment2(); private Fragment hTab03 = new Fragment3(); private Fragment hTab04 = new Fragment4(); private LinearLayout hTabWeChat; private LinearLayout hTabFrd; private LinearLayout hTabContact; private LinearLayout hTabMe; private ImageView imageWeixin,imagepengyou,imagefaxian, imagewo; private FragmentManager fm; private TextView textView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); textView=findViewById(R.id.textView2); hTabWeChat =findViewById(R.id.linearlayout1); hTabFrd =findViewById(R.id.linearlayout2); hTabContact =findViewById(R.id.linearlayout3); hTabMe =findViewById(R.id.linearlayout4); imageWeixin=findViewById(R.id.imageView1); imagepengyou=findViewById(R.id.imageView2); imagefaxian=findViewById(R.id.imageView3); imagewo =findViewById(R.id.imageView4); initEvent(); initFragment(); showfragment(0); } private void initFragment() { fm = getSupportFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); transaction.add(R.id.content, hTab01); transaction.add(R.id.content, hTab02); transaction.add(R.id.content, hTab03); transaction.add(R.id.content, hTab04); transaction.commit(); } private void showfragment(int i){ FragmentTransaction transaction=fm.beginTransaction(); hideFragment(transaction); switch (i){ case 0: textView.setText("微信"); transaction.show(hTab01); imageWeixin.setImageResource(R.drawable.a_original); break; case 1: textView.setText("朋友"); transaction.show(hTab02); imagepengyou.setImageResource(R.drawable.b_original); break; case 2: textView.setText("发现"); transaction.show(hTab03); imagefaxian.setImageResource(R.drawable.c_original); break; case 3: textView.setText("我"); transaction.show(hTab04); imagewo.setImageResource(R.drawable.d_original); break; default: break; } transaction.commit(); } private void hideFragment(FragmentTransaction transaction) { transaction.hide(hTab01); transaction.hide(hTab02); transaction.hide(hTab03); transaction.hide(hTab04); } private void initEvent() { hTabWeChat.setOnClickListener(this); hTabFrd.setOnClickListener(this); hTabContact.setOnClickListener(this); hTabMe.setOnClickListener(this); } @SuppressLint("NonConstantResourceId") public void onClick(View v) { resetImage(); int viewId = v.getId(); if (viewId == R.id.linearlayout1) { showfragment(0); } else if (viewId == R.id.linearlayout2) { showfragment(1); } else if (viewId == R.id.linearlayout3) { showfragment(2); } else if (viewId == R.id.linearlayout4) { showfragment(3); } } public void resetImage(){ imageWeixin.setImageResource(R.drawable.a_original); imagepengyou.setImageResource(R.drawable.b_original); imagefaxian.setImageResource(R.drawable.c_original); imagewo.setImageResource(R.drawable.d_original); } }
新版Onclick无法用case只能用if_else
AndroidManifest.xml
<activity android:name="Com.example.project1.MainActivity" android:exported="true" android:label="@string/app_name" android:theme="@style/Theme.AppCompat"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> AndroidManifest.xml中要加入 android:theme="@style/Theme.AppCompat">指定style字样
三 运行结果
3.1运行环境:
操作系统:Windows 11 家庭中文版
编译器:Android Studio 2023.3.1.patch1
3.2 运行结果:
运行后点击微信、朋友、发现、我的效果,可以看到界面和图标都发生了相应的切换。
然后加入recycleview列表
1.建立item.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="TextView" android:textColor="@color/purple_200" android:textSize="35sp" /> </LinearLayout>
2.重新写fragement1.java
package Com.example.project1; import android.content.Context; import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.Fragment; import androidx.recyclerview.widget.LinearLayoutManager; import androidx.recyclerview.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import java.util.ArrayList; import java.util.List; public class Fragment1 extends Fragment{ Context context; RecyclerView recyclerView; View view; List list; @Override public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view=inflater.inflate(R.layout.fragment_1,container,false); context=view.getContext(); recyclerView=view.findViewById(R.id.recyclerview); list=new ArrayList(); for(int i=0;i<10;i++){ list.add("这是第"+i+"行数据"); } Myadapter myadapter = new Myadapter(context,list); recyclerView.setAdapter(myadapter); LinearLayoutManager manager=new LinearLayoutManager(context); manager.setOrientation(LinearLayoutManager.VERTICAL); recyclerView.setLayoutManager(manager); return view; } }
对应的xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/frameLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".Fragment1"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerview" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:layout_marginEnd="8dp" android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
效果:
文件夹
现在加入点击展示新的view
新的fragement1.java
package Com.example.project1; import android.content.Context; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.app.AlertDialog; import android.content.DialogInterface; import android.content.Context; import androidx.fragment.app.Fragment; import androidx.recyclerview.widget.LinearLayoutManager; import androidx.recyclerview.widget.RecyclerView; import java.util.ArrayList; import java.util.List; public class Fragment1 extends Fragment implements MyAdapter.OnItemClickListener { private Context context; private RecyclerView recyclerView; private View view; private List<Superhero> superheroList; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { view = inflater.inflate(R.layout.fragment_1, container, false); context = getContext(); // 使用 getContext() 获取上下文 recyclerView = view.findViewById(R.id.recyclerview); superheroList = new ArrayList<>(); superheroList.add(new Superhero("Spiderman", R.drawable.spiderman, getString(R.string.spiderman_intro))); superheroList.add(new Superhero("Batman", R.drawable.batman, getString(R.string.batman_intro))); MyAdapter myAdapter = new MyAdapter(context, superheroList, this); recyclerView.setAdapter(myAdapter); LinearLayoutManager manager = new LinearLayoutManager(context); manager.setOrientation(LinearLayoutManager.VERTICAL); recyclerView.setLayoutManager(manager); return view; } @Override public void onItemClick(Superhero superhero) { // 创建 AlertDialog.Builder 对象 AlertDialog.Builder builder = new AlertDialog.Builder(context); // 设置对话框标题和消息 builder.setTitle(superhero.getName()) .setMessage(superhero.getIntro()) // 添加 "OK" 按钮,点击时关闭对话框 .setPositiveButton("OK", (dialog, id) -> dialog.dismiss()); // 创建并显示对话框 AlertDialog dialog = builder.create(); dialog.show(); } public void onItemClick(String data) { } }
对应的xml
<!-- fragment_1.xml --> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:id="@+id/introTextView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/recyclerview" android:layout_marginTop="16dp" android:padding="16dp" android:textSize="18sp" /> </RelativeLayout>
item.xml
<?xml version="1.0" encoding="utf-8"?> <!-- item.xml --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="16dp"> <ImageView android:id="@+id/imageView1" android:layout_width="80dp" android:layout_height="80dp" android:scaleType="centerCrop" android:src="@mipmap/ic_launcher" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:text="Default Text" android:textSize="18sp" android:gravity="center_vertical" /> </LinearLayout>
string.xml 中要声明
<string name="spiderman_intro">平凡的英雄</string> <string name="batman_intro">有钱又有病的英雄</string>
Superhero.java
// Superhero.java package Com.example.project1; public class Superhero { private String name; private int imageResource; private String intro; public Superhero(String name, int imageResource, String intro) { this.name = name; this.imageResource = imageResource; this.intro = intro; } public String getName() { return name; } public int getImageResource() { return imageResource; } public String getIntro() { return intro; } }
MyAdapter.java
package Com.example.project1; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; import androidx.annotation.NonNull; import androidx.recyclerview.widget.RecyclerView; import java.util.List; public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyHolder> { private Context context; private List<Superhero> dataList; private OnItemClickListener onItemClickListener; public MyAdapter(Context context, List<Superhero> list, OnItemClickListener onItemClickListener) { this.context = context; this.dataList = list; this.onItemClickListener = onItemClickListener; } @NonNull @Override public MyHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View view = LayoutInflater.from(context).inflate(R.layout.item, parent, false); return new MyHolder(view); } @Override public void onBindViewHolder(@NonNull MyHolder holder, int position) { holder.superhero = dataList.get(position); holder.textView.setText(holder.superhero.getName()); holder.imageView.setImageResource(holder.superhero.getImageResource()); holder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (onItemClickListener != null) { onItemClickListener.onItemClick(holder.superhero); } } }); } @Override public int getItemCount() { return dataList.size(); } public interface OnItemClickListener { void onItemClick(Superhero superhero); } public static class MyHolder extends RecyclerView.ViewHolder { TextView textView; ImageView imageView; Superhero superhero; public MyHolder(@NonNull View itemView) { super(itemView); textView = itemView.findViewById(R.id.textView1); imageView = itemView.findViewById(R.id.imageView1); } } }
四 源码仓库
WeChat: 微信门户页面设计(第一次作业) (gitee.com)
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。