一、作业目标
1、设计一个微信的门户框架,实现4个tab切换效果;本功能使用的技术为:activity、xml、fragment。
2、在任一tab页中实现列表效果;本功能的实现使用recycleview。
二、技术说明
1、Activity
1、一个单独的窗口,程序流程都必须在Activity中运行。一个程序包含一个或者多个Activity。
2、数据显示的载体,用户视觉显示和行为操控的界面;
3、Activity的创建:
2、xml
一种可扩展标记语言,被用来传输和存储数据。
3、Fragment
1、为了更好地重用和适应大屏幕地需求;
2、必须被包含在Activity中,只会生成java文件和对应地xml布局文件,不会在mainfests里生成注册的代码;
3、一般而言,每个Fragment需要重写如下几个方法:
•OnCreate():当Fragment被创建时调用,一般在此方法中做必要的初始化工作。
•OnCreateView():当Fragment显示界面时回调此方法,返回显示的View。
4、Fragment的创建:
添加一个右栏对应的Fragment,右栏是一个普通的Fragment,依次选择New->Fragment->Fragment(Blank)。
4、Recycleview
1、RecycleView实现瀑布流的布局
(1、通过id找到控件recycleview 2、设置输出context 3、设置适配器 4、设置线性布局)
2、AdapterView显示简单或复杂列表,item(行),数据与行的对齐
(item.xml瀑布流在view中的位置)
3、Adapter(适配器),把列表与数据源对应起来
(创建Myadapter.java 1、构造方法:初始化上下文和每一行内容 2、创建ViewHolder实例,并加载item布局 3、将获取的数据绑定到对应的控件上 4、获取列表条目带的总数 5、自定义内部类(ViewHolder要自己写,因为每一行不一样,需要自定义模式,Holder理解为指向行的指针;需要做个行的xml)) ps:Adapter有很多类族(难易不同)
三、关键代码解析
1、button.xml的编写
1、创建一个垂直的LinearLayout,生成一个LinearLayout1
底色改变:android:background="@color/black";
添加照片及来源(使用的Android自带图片):android:src="@android:drawable/btn_star_big_on";
内容居中:android:gravity="center"
<LinearLayout
android:id="@+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/black"
android:src="@android:drawable/btn_star_big_on" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/black"
android:gravity="center"
android:text="聊天"
android:textColor="@color/white"
android:textSize="30sp" />
</LinearLayout>
2、创建一个水平的LinearLayout,在其下面把LinearLayout1放入并复制创建LinearLayout2、LinearLayout3、LinearLayout4,修改每一个LinearLayout里面imageView和textView的id。
2、tab.xml的编写
生成一个textView修改id、text、gravity并在view中居中。创建tab1-4。
3、Fragment.java和Activity_main.xml的编写
1、创建BlankFragment1
public class BlankFragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.tab1, container, false);
}
2、复制BlankFragment1三遍创建BlankFragment2、BlankFragment3、BlankFragment4;
inflater.inflate(R.layout.tab1, container, false)压缩页面,每个BlankFragment中需要修改tab1为对应的页面
3、把button、top、tab放到一个页面中
<include layout="@layout/top"
android:layout_width="match_parent"
android:layout_height="wrap_content"></include>
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"></include>
<include layout="@layout/top"></include>把top包含进来
<FrameLayout android:id="@+id/content" android:layout_weight="1"> </FrameLayout>使用FrameLayout实现view中内容切换
4、在MainActivity中实现页面跳转
linearLayout1=findViewById(R.id.LinearLayout1);获取LinearLayout1
initial();写一个函数把四个fragment放入,只显示一个 fragmenthide();隐藏,点击时把那个show出来 fragmentshow(fragment1);开始时显示页面一
linearLayout1.setOnClickListener(this);设置事件监听
fm=getSupportFragmentManager();
FragmentTransaction ft=fm.beginTransaction()//FragmentTransaction交互,网络间断发送,节点间互相通信,且需要commit,用此方法写出fragmenthide()、initial()、fragmentshow()
.add(R.id.content,fragment1)//.commit()不允许
.add(R.id.content,fragment2)
.add(R.id.content,fragment3)
.add(R.id.content,fragment4);
//真正的动作是add,fragment只不过提供了一个示例
ft.commit();
@Override
public void onClick(View view) {
//view是全局的View
fragmenthide();
//getId可以找到点击的ID
/*switch (view.getId()){
case R.id.LinearLayout1: fragmentshow(fragment1);
case R.id.LinearLayout2: fragmentshow(fragment2);
case R.id.LinearLayout3: fragmentshow(fragment3);
case R.id.LinearLayout4: fragmentshow(fragment4);
break;
}*/
if(view.getId()==R.id.LinearLayout1){fragmentshow(fragment1);}
if(view.getId()==R.id.LinearLayout2){fragmentshow(fragment2);}
if(view.getId()==R.id.LinearLayout3){fragmentshow(fragment3);}
if(view.getId()==R.id.LinearLayout4){fragmentshow(fragment4);}
//fragmentshow(fragment1);
}
事件监听,使用if实现点击不同的地方时页面的切换。
5、配置Adapter(适配器)
public class Myadapter extends RecyclerView.Adapter<Myadapter.Myholder> {
Context context1;
List<String> list1;
//构造方法
public Myadapter(Context context, List list){
context1=context;
list1=list;
}
//创建ViewHolder实例,并加载item布局
@NonNull
@Override
public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view=LayoutInflater.from(context1).inflate(R.layout.item,parent,false);
Myholder holder=new Myholder(view);
return holder;
}
//将获取的数据绑定到对应的控件上
@Override
public void onBindViewHolder(@NonNull Myholder holder, int position) {
holder.textView.setText(list1.get(position));
}
//获取列表条目带的总数
public int getItemCount() {
return list1.size();
}
//自定义内部类(ViewHolder要自己写,因为每一行不一样,需要自定义模式,Holder理解为指向行的指针;需要做个行的xml)
public class Myholder extends RecyclerView.ViewHolder{
TextView textView;
public Myholder(View itemView){
super(itemView);
textView=itemView.findViewById(R.id.textView11);
}
}
6、更改BlankFragment2,实现瀑布流列表
1、在activity_recycleview.xml中生成一个recycview
2、生成一个item.xml显示放一行的内容的格式
3、修改BlankFragment2的onCreateView
View view=inflater.inflate(R.layout.activity_recycleview, container, false);压缩视图 recyclerView = view.findViewById(R.id.recycleview);//通过id找到控件recycleview list.add("联系人1:张三"); list.add("联系人2:李四"); list.add("联系人3:王五"); list.add("联系人4:李明"); list.add("联系人5:潘老师");//瀑布流的内容 context = view.getContext(); //设置适配器 adapter = new Myadapter(context, list); recyclerView.setAdapter(adapter); LinearLayoutManager manager = new LinearLayoutManager(context);//设置线性布局 manager.setOrientation(RecyclerView.VERTICAL); recyclerView.setLayoutManager(manager); return view;//返回视图,点击时可以显现出瀑布流
四、结果展示
代码仓库(layout1.xml和RecycleviewActivity.java与本文无关):