前言
本学期选修了移动开发技术,在经过差不多一个月的学习之后,终于迎来了这门课的第一次大作业-微信首页界面的设计.
一、Android Studio是什么？
Android Studio 是谷歌推出的一个Android集成开发工具，基于IntelliJ IDEA. 类似 Eclipse ADT，Android Studio 提供了集成的 Android 开发工具用于开发和调试.
二、利用Android Studio实现微信首页界面的设计.
本次微信界面的设计首先得做一些前提准备,如微信界面所需的图片等.
该部分大致分为三个部分,即首页标题,内容,及底部的按钮.那我们接下来要完成的就是top,content和bottom三个xml文件.
1.top.xml文件.
我们先在Layout里新建一个xml,注意选择Layout.这样我们就建立了第一个xml-top.xml.由于这个文件是用来设计首页标题,所以我们只需设计一个textView即可.具体设计效果如下图:
2.设计完top.xml后,接下来我们要做的便是bottom.xml.相比于top.xml,bottom.xml就复杂很多,因为有很多按钮需要我们设计.这里也将用到前面所提到的准备好的图片.具体实现如下:
<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="@drawable/bottom_bar"
android:orientation="horizontal"
android:baselineAligned="false">
<LinearLayout
android:id="@+id/id_tab_weixin"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_weixin_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:clickable="false"
android:contentDescription="@string/app_name"
app:srcCompat="@drawable/tab_weixin_pressed" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:text="微信"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_frd"
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_frd_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:clickable="false"
android:contentDescription="@string/app_name"
app:srcCompat="@drawable/tab_weixin_pressed"
tools:srcCompat="@drawable/tab_find_frd_normal" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:text="朋友"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_contact"
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_contact_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:clickable="false"
android:contentDescription="@string/app_name"
app:srcCompat="@drawable/tab_weixin_pressed"
tools:srcCompat="@drawable/tab_address_normal" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="通讯录"
android:clickable="false"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_settings"
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_settings_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:clickable="false"
android:contentDescription="@string/app_name"
app:srcCompat="@drawable/tab_weixin_pressed"
tools:srcCompat="@drawable/tab_settings_normal" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="设置"
android:clickable="false"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
3.OK,最后我们来搞定首页所需要的content.因为我们设计了四个按钮,所以就需要新建四个xml文件来进行按钮对应内容的设计.大致如下.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="这是设置界面"
android:textSize="25sp" />
</LinearLayout>`
每个xml除了text内容以外基本一致,所以其余三个复制粘贴就好.
4.完成后,我们接下来就需要将这四个xml压缩到一起,形成一个子窗口,这里就要用到Fragment.
public class settingsFragment extends Fragment {
public settingsFragment() {
// 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.tab04, container, false);
}
}
同样,其余三个只需要复制粘贴即可(注意对应的xml).
5.完成后,便要进行这四个控键的控制,以及控键的响应控制等工作.最终完成的效果如下:
总结
本次作业对我来说不得不说是一个全新的事物,因为以前完全没接触过.虽说这次完成了,但要学的,要理解的还有很多.就.努力吧.附上这次作业完整代码.
https://gitee.com/delta-jiuli/MyWeChat