安卓开发之前端
安卓开发之前端界⾯的搭建
前段时间因为⽹络编程这门课要做⼀个课程project，题⽬是本地服务器的开发，需要开发⼀个安卓客户端，于是就把去年⼩学期学的那点安卓知识捡起来了（⼼累）
想到去年⼩学期学的那点安卓真的不算什么，就是⼀些很简单的东西，所以为了做好这次前端，努⼒学了很多安卓的前端搭建知识，毕竟是数媒⼈，在前端上可不能输给其他专业的（哼~）
这次的安卓开发需求⽐较简单，要求的功能不多因此界⾯也没有⼏个。
界⾯清单
连接服务器界⾯
登录界⾯
注册界⾯
⾸页界⾯
消息界⾯
社区界⾯
设置界⾯
联系⼈界⾯
添加好友界⾯
好友聊天界⾯
社区消息编辑界⾯
添加联系⼈界⾯
有些界⾯其实差不多，基本上要⽤到以下⼀些组件：
按钮Button
⽂本显⽰TextView
⽂本域Text Field
图表charts
⼯具条toolbar
浮动按钮fab
列表ListView
页⾯切换Tab
刷新
接下来我就介绍⼀些组件的使⽤
⼀、开发环境
Android Studio2.0
Android Studio 是⼀个Android集成开发⼯具，基于IntelliJ IDEA. 类似 Eclipse ADT，Android Studio 提供了集成的 Android 开发⼯具⽤于开发和调试。
我以前⽤的是eclipse with ADT进⾏开发的，现在安卓开发基本上主流的就是这两种IDE，eclipse是⽼牌的java IDE，⾃然也⽀持安卓开发。我⽤eclipse的时候觉得他对界⾯的可视化编辑⽐较差，⽽且开模拟器会很卡，然后这次决定采⽤AS进⾏开发，AS对界⾯的可视化编辑⽀持⽐较好，模拟器⽐较快（我⼀般是⽤真机调试）但是打代码的时候总有⼀种我在写C++的错觉…
还有要说的⼀点是，eclipse和AS的项⽬结构是不⼀样的！在eclipse⾥⾯⼀个project就是⼀个app，但是在AS⾥⾯project不是app的意思，⽽是⼀个项⽬的意思，这个项⽬底下可以有多个app同时存在，当你运⾏的时候要选择运⾏哪个app。AS在侧边栏可以⽀持多种⽂件结构视图，通常我是看Android 视图，这样⼦看起来就和eclipse的结构差不多了。
关于⽂件结构、⽂件功能我就不多说了，⽹上有很多⼊门资料。
⼆、定制⾃⼰的ToolBar
通常新建⼀个项⽬安卓会⾃动的给你界⾯加上⼀个丑丑的toolbar，⽽且不好改他的功能，因为有时候我们需要在toolbar加上按钮来跳转，所以为了解决这个问题我们可以定制⾃⼰的toolbar。
先看⼀下效果：
这是统⼀模板：建⽴⼀个layout⽂件，layout_l
代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="schemas.android/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="@+id/toolbar_content_rlyt"
android:layout_width="match_parent"
android:layout_height="50dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:background="@color/bg_toolbar">
<Button
android:id="@+id/toolbar_left_btn"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentLeft="true"
android:padding="50dp"
android:gravity="center"
android:layout_centerVertical="true"
android:background="#00000000"
android:visibility="invisible"/>
<TextView
android:id="@+id/toolbar_left_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/toolbar_left_btn"
android:gravity="center"
android:layout_centerVertical="true"
android:textColor="#fff"
android:textSize="15sp"
android:text="返回"
android:visibility="gone"
/>
<TextView
<TextView
android:id="@+id/toolbar_title_tv"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:layout_centerInParent="true"
android:singleLine="true"
android:text="标题"
android:textSize="20sp"
android:textColor="#fff"
android:maxEms="10"
android:visibility="invisible"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="@id/toolbar_title_tv" android:layout_centerVertical="true">
<Button
android:id="@+id/toolbar_right_btn"
android:layout_width="25dp"
android:layout_height="25dp"
android:gravity="center"
android:layout_marginLeft="70dp"
android:visibility="invisible"
android:background="#00000000"
android:textSize="15sp"
android:textColor="#fff"/>
<TextView
android:id="@+id/toolbar_right_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginLeft="70dp"
android:textColor="#fff"
android:textSize="15sp"
android:text="更多"
android:visibility="gone"/>
<Button
android:id="@+id/toolbar_right_btn2"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginLeft="25dp"
android:gravity="center"
android:visibility="invisible"
android:background="#00000000"
android:textSize="15sp"
android:textColor="#fff"/>
<TextView
android:id="@+id/toolbar_right_tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#fff"
android:textSize="15sp"
android:text="更多2"
android:visibility="gone"/>
</LinearLayout>
</RelativeLayout>
<!--标题栏底部微阴影-->
<!--标题栏底部微阴影-->
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#AAAAAA"
/>
</LinearLayout>
可以看到我在这个统⼀模板⾥⾯设定了三个按钮可供跳转：左边的按钮通常⽤来退出，右边有两个按钮可以根据具体需要只⽤⼀个或两个，当然你也可以多加⼏个
为了在每个页⾯调⽤这个统⼀模板，我们需要写⼀个java⽂件，CustomToolBar
ample.bpapp.view;
t.Context;
t.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
ample.bpapp.bpapp.R;
/**
* Created by ningrun on 2017/5/31.
*/
public class CustomToolBar extends LinearLayout {
private Boolean isLeftBtnVisible;
private int leftResId;
private Boolean isLeftTvVisible;
private String leftTvText;
private Boolean isRightBtnVisible;
private int rightResId;
private Boolean isRightTvVisible;
private String rightTvText;
private Boolean isRightBtnVisible2;
private int rightResId2;
private Boolean isRightTvVisible2;
recycle是什么意思private String rightTvText2;
private Boolean isTitleVisible;
private String titleText;
private int backgroundResId;
public CustomToolBar(Context context) {
this(context, null);
}
public CustomToolBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(attrs);
}
}
/**
* 初始化属性
* @param attrs
*/
public void initView(AttributeSet attrs) {
TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.CustomToolBar); /**-------------获取左边按钮属性------------*/
isLeftBtnVisible = Boolean(R.styleable.CustomToolBar_left_btn_visible, false);
leftResId = ResourceId(R.styleable.CustomToolBar_left_btn_src, -1);
/**-------------获取左边⽂本属性------------*/
isLeftTvVisible = Boolean(R.styleable.CustomToolBar_left_tv_visible, false);
if (typedArray.hasValue(R.styleable.CustomToolBar_left_tv_text)) {
leftTvText = String(R.styleable.CustomToolBar_left_tv_text);
}
/**-------------获取右边按钮属性------------*/
isRightBtnVisible = Boolean(R.styleable.CustomToolBar_right_btn_visible, false); rightResId = ResourceId(R.styleable.CustomToolBar_right_btn_src, -1);
/**-------------获取右边⽂本属性------------*/
isRightTvVisible = Boolean(R.styleable.CustomToolBar_right_tv_visible, false);
if (typedArray.hasValue(R.styleable.CustomToolBar_right_tv_text)) {
rightTvText = String(R.styleable.CustomToolBar_right_tv_text);
}
/**-------------获取右边按钮2属性------------*/
isRightBtnVisible2 = Boolean(R.styleable.CustomToolBar_right_btn_visible2, false); rightResId2 = ResourceId(R.styleable.CustomToolBar_right_btn_src2, -1);
/**-------------获取右边⽂本2属性------------*/
isRightTvVisible2 = Boolean(R.styleable.CustomToolBar_right_tv_visible2, false); if (typedArray.hasValue(R.styleable.CustomToolBar_right_tv_text2)) {
rightTvText2 = String(R.styleable.CustomToolBar_right_tv_text2);
}
/**-------------获取标题属性------------*/
isTitleVisible = Boolean(R.styleable.CustomToolBar_title_visible, false);
if (typedArray.hasValue(R.styleable.CustomToolBar_title_text)) {
titleText = String(R.styleable.CustomToolBar_title_text);
}
/**-------------背景颜⾊------------*/
backgroundResId = ResourceId(R.styleable.CustomToolBar_barBackground, -1); le();
/**-------------设置内容------------*/
View barLayoutView = View.inflate(getContext(), R.layout.layout_common_toolbar, null);
Button leftBtn = (Button) barLayoutView.findViewById(lbar_left_btn);
TextView leftTv = (TextView) barLayoutView.findViewById(lbar_left_tv);
TextView titleTv = (TextView) barLayoutView.findViewById(lbar_title_tv);
Button rightBtn = (Button) barLayoutView.findViewById(lbar_right_btn);
TextView rightTv = (TextView) barLayoutView.findViewById(lbar_right_tv);
Button rightBtn2 = (Button) barLayoutView.findViewById(lbar_right_btn2);
TextView rightTv2 = (TextView) barLayoutView.findViewById(lbar_right_tv2);
RelativeLayout barRlyt = (RelativeLayout) barLayoutView.findViewById(lbar_content_rlyt);
if (isLeftBtnVisible) {
leftBtn.setVisibility(VISIBLE);
}
if (isLeftTvVisible) {
leftTv.setVisibility(VISIBLE);
}
if (isRightBtnVisible) {
rightBtn.setVisibility(VISIBLE);
}
if (isRightTvVisible) {
rightTv.setVisibility(VISIBLE);
发布评论