您的位置:首页 > 产品设计 > UI/UE

[安卓]手机管家(六)防盗之UI及自定义样式

2015-06-13 11:27 573 查看
防盗输入密码后,需要跳转到一个设置界面,第一次来需要设置一些功能,以后就不用设置了

layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="60dp"
android:text="手机防盗"
android:background="#00FF00"
android:gravity="center"
android:textSize="25sp"/>
</LinearLayout>
activity

public class LostFindActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_lostfind);
}
}


需要在manifest里声明,在homeactivity里跳转

if (password_input_digest.equals(password_saved)) {
//密码跟保存的一致,则可以进入该模块
Toast.makeText(HomeActivity.this, "密码正确,即将进入设置模块", 1).show();
dialog.dismiss();
//进入该模块
Intent intent = new Intent(HomeActivity.this, LostFindActivity.class);
startActivity(intent);
}




在这个页面要去判断用户是否设置了,已经设置了就进入这个页面,没有的话就进入设置页面,分为四个activity,一个一个来

public class LostFindActivity extends Activity {
private SharedPreferences sp;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_lostfind);
sp=getSharedPreferences("config", MODE_PRIVATE);
//进入这个防盗页面的时候,应该去判断,如果用户之前有过设置,则显示本页面
if (sp.getBoolean("setupcomplete", false)) {
//设置过

}else {
//如果没有设置过,则需要跳入到设置页面1,让用户先去设置一下
Intent intent = new Intent(this, Setup1Activity.class);
startActivity(intent);
}
}
}
再来看setup1 这相当于一个欢迎界面,显示一些可设置选项,并且需要能点击 下一步 记得manifest里声明

先来布局

<?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="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="60dp"
android:background="#00FF00"
android:gravity="center"
android:text="1.欢迎使用手机防盗"
android:textSize="25sp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_marginLeft="5dp"
android:gravity="center_vertical"
android:text="您的手机防盗卫士:"
android:textColor="#000000"
android:textSize="18sp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="@android:drawable/btn_star_big_on"
android:text="SIM卡变更报警"
android:gravity="center_vertical"
android:textSize="16sp"
android:layout_marginLeft="8dp"
android:textColor="#000000"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="@android:drawable/btn_star_big_on"
android:text="GPS追踪"
android:gravity="center_vertical"
android:textSize="16sp"
android:layout_marginLeft="8dp"
android:textColor="#000000"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="@android:drawable/btn_star_big_on"
android:text="数据远程销毁"
android:gravity="center_vertical"
android:textSize="16sp"
android:layout_marginLeft="8dp"
android:textColor="#000000"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="@android:drawable/btn_star_big_on"
android:text="远程锁屏"
android:gravity="center_vertical"
android:textSize="16sp"
android:layout_marginLeft="8dp"
android:textColor="#000000"/>

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_online" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_invisible" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_invisible" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_invisible" />
</LinearLayout>

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/setup1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="下一步" />
</RelativeLayout>
</LinearLayout>


但是明显可以优化,因为textView里有大量重复代码,应该抽取出来,自定义样式,values下styles里定义

<style name="setup1_item">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:drawableLeft">@android:drawable/btn_star_big_on</item>
<item name="android:gravity">center_vertical</item>
<item name="android:textSize">16sp</item>
<item name="android:layout_marginLeft">8dp</item>
<item name="android:textColor">#000000</item>
</style>


可以代替掉

<TextView
style="@style/setup1_item"
android:text="SIM卡变更报警" />
<TextView
style="@style/setup1_item"
android:text="GPS追踪" />
<TextView
style="@style/setup1_item"
android:text="数据远程销毁" />
<TextView
style="@style/setup1_item"
android:text="远程锁屏" />


OK,要给这个button来一个响应

<Button
android:onClick="next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="下一步" />


点这个按钮会跳到另一个页面,先来实现这个页面,这其中又用到了之前的自定义控件和定义styles属性来减少重复

<style name="setup_button_pre">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_alignParentBottom">true</item>
<item name="android:layout_alignParentLeft">true</item>
<item name="android:onClick">previous</item>
<item name="android:text">上一步</item>
</style>

<style name="setup_button_next">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_alignParentBottom">true</item>
<item name="android:layout_alignParentRight">true</item>
<item name="android:onClick">next</item>
<item name="android:text">下一步</item>
</style>


完整layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:rjl="http://schemas.android.com/apk/res/com.rjl.mobilephonemanager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="60dp"
android:background="#00FF00"
android:gravity="center"
android:text="2.手机卡的绑定"
android:textSize="25sp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_marginLeft="5dp"
android:gravity="center_vertical"
android:text="通过绑定手机卡:"
android:textColor="#000000"
android:textSize="18sp" />
<TextView
android:layout_marginTop="5dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="center_vertical"
android:text="下次重启手机,如果发现sim卡变化\n就会发送报警短信"
android:textColor="#000000"
android:textSize="18sp" />

<com.rjl.mobilephonemanager.ui.SettingItem
android:id="@+id/settingitem_autoupdate"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
rjl:itemtitle="点击绑定sim卡"
rjl:desc_checkbox_on="已经绑定"
rjl:desc_checkbox_off="尚未绑定"/>

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:layout_marginTop="5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_invisible" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_online" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_invisible" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_invisible" />
</LinearLayout>

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/bind" />
</RelativeLayout>
</LinearLayout>


那么从1跳到2,2还要能回跳到1,都需要finish自己,任务栈

public void next(View v){
Intent intent = new Intent(this, Setup2Activity.class);
startActivity(intent);
finish();
}


public class Setup2Activity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_setup2);
}
public void next(View v){

}
public void previous() {
// TODO Auto-generated method stub
Intent intent = new Intent(this, Setup1Activity.class);
startActivity(intent);
finish();
}
}


1、2之间的跳转完毕,现在来完善2

这里每一个属性之间都要一个横线,前面的设置中心settingitem也需要添加一个,这里也需要

下划线的实现,在setting_Item.xml里,View,给高度设的很小即可,在后面直接引用自定义控件即可

<View
android:layout_width="fill_parent"
android:layout_height="0.5dp"
android:background="#000000"
android:layout_alignParentBottom="true"/>
</RelativeLayout>


tv_setting_title.setText(itemname);
//防盗设置页面2需要一个默认开启
tv_setting_description.setText(desc_checkbox_off);


有个小问题,settingitem里面应该是60dp

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="60dp" >


完善上一步和下一步这些button,鼠标点击上去的一瞬间应该是变色的,用户体验会比较好

button本身是一个view,其各种属性是在sdk\platforms\android-19\data\res\values\styles下定义的

<style name="Widget.Button">
<item name="android:background">@android:drawable/btn_default</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
<item name="android:textAppearance">?android:attr/textAppearanceSmallInverse</item>
<item name="android:textColor">@android:color/primary_text_light</item>
<item name="android:gravity">center_vertical|center_horizontal</item>
</style>


而背景属性又在sdk\platforms\android-19\data\res\drawable的btn_default里定义

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="@drawable/btn_default_normal" />
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="@drawable/btn_default_normal_disable" />
<item android:state_pressed="true"
android:drawable="@drawable/btn_default_pressed" />
<item android:state_focused="true" android:state_enabled="true"
android:drawable="@drawable/btn_default_selected" />
<item android:state_enabled="true"
android:drawable="@drawable/btn_default_normal" />
<item android:state_focused="true"
android:drawable="@drawable/btn_default_normal_disable_focused" />
<item
android:drawable="@drawable/btn_default_normal_disable" />
</selector>


其相应的获取焦点的状态和背景图就在这定义了

所以我们要在drawable新建一个btn_default的XML文件,并且是selector属性的

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true"
android:drawable="@drawable/btn_green_pressed" />
<item android:state_focused="true" android:state_enabled="true"
android:drawable="@drawable/btn_green_pressed" />
<item android:state_enabled="true"
android:drawable="@drawable/btn_green_normal" />
</selector>


先修改一下1里面的next按钮

<Button
android:onClick="next"
android:background="@drawable/btn_default"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="下一步" />


然后同样可以修改2的,不过其后几个页面都会有这两个按钮,所以我们可以写到styles里方便引用

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/bind" />
<Button
style="@style/setup_button_pre"/>
<Button
style="@style/setup_button_next" />
</RelativeLayout>


OK,可以实现3了

public class Setup3Activity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_setup3);
}
public void next(View v){
Intent intent = new Intent(this, Setup4Activity.class);
startActivity(intent);
finish();
}
public void previous(View v) {
// TODO Auto-generated method stub
Intent intent = new Intent(this, Setup2Activity.class);
startActivity(intent);
finish();
}
}


layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:rjl="http://schemas.android.com/apk/res/com.rjl.mobilephonemanager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="60dp"
android:background="#00FF00"
android:gravity="center"
android:text="3.设置安全号码"
android:textSize="25sp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_marginLeft="5dp"
android:gravity="center_vertical"
android:text="sim卡变更后"
android:textColor="#000000"
android:textSize="18sp" />
<TextView
android:layout_marginTop="5dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="center_vertical"
android:text="报警短信会自动发送给安全号码"
android:textColor="#000000"
android:textSize="18sp" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="请输入安全号码"/>
<Button
android:onClick="selectpeople"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="选择联系人"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:layout_marginTop="5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_invisible" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_invisible" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_online" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_invisible" />
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/phone" />
<Button
style="@style/setup_button_pre"/>
<Button
style="@style/setup_button_next" />
</RelativeLayout>
</LinearLayout>


3的activity里要获取联系人,后面再来实现

public void selectpeople(View v){
//需要实现从系统的联系人里获取一个联系人信息

}


再来4,在4里设置成功后,用户应该去的是LostFindActivity,而不再进行设置,这需要在LostFindActivity和4里使用SharedPreferences来保存并做判断

layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:rjl="http://schemas.android.com/apk/res/com.rjl.mobilephonemanager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="60dp"
android:background="#00FF00"
android:gravity="center"
android:text="4.恭喜您设置完成"
android:textSize="25sp" />
<CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="您还没有开启手机防盗保护"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="激活超级管理员\n您就可以远程擦除数据"
android:padding="5dp"
android:background="@drawable/textbg_setup4"
android:textSize="18sp"
android:layout_margin="5dp"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:layout_marginTop="5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_invisible" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_invisible" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_invisible" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_online" />
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/bind" />
<Button
style="@style/setup_button_pre"/>
<Button
style="@style/setup_button_next"
android:text="设置完成"/>
</RelativeLayout>
</LinearLayout>


activity

public class Setup4Activity extends Activity {
private SharedPreferences sp ;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_setup4);
}
public void next(View v) {
// TODO Auto-generated method stub
sp=getSharedPreferences("config", MODE_PRIVATE);
Editor editor = sp.edit();
editor.putBoolean("setupcomplete", true);
editor.commit();

Intent intent = new Intent(this, LostFindActivity.class);
startActivity(intent);
finish();
}
public void previous(View v) {
// TODO Auto-generated method stub
Intent intent = new Intent(this, Setup3Activity.class);
startActivity(intent);
finish();
}
}


完成lostfind的layout

<?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="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="60dp"
android:text="手机防盗"
android:background="#00FF00"
android:gravity="center"
android:textSize="25sp"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingLeft="10dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="安全号码"
android:layout_alignParentLeft="true"
android:textSize="20sp"/>
<TextView
android:id="@+id/tv_lostfind_safenum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5556"
android:layout_alignParentRight="true"
android:textSize="20sp"/>
</RelativeLayout>
<View
android:layout_marginTop="5dp"
android:layout_width="fill_parent"
android:layout_height="0.2dp"
android:background="#000000"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingLeft="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="防盗保护是否开启"
android:layout_alignParentLeft="true"
android:textSize="20sp"
android:gravity="center_vertical"/>
<ImageView
android:id="@+id/iv_lostfind_lockstatus"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:src="@drawable/unlock"/>
</RelativeLayout>
<View
android:layout_marginTop="5dp"
android:layout_width="fill_parent"
android:layout_height="0.2dp"
android:background="#000000"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:onClick="resetup"
android:text="重新进入设置向导页面" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#55000000"
android:text="功能简介"
android:textSize="18sp"
android:padding="8dp"/>
<TextView
style="@style/setup1_item"
android:text="GPS追踪#*location*#"
android:layout_margin="5dp"/>
<TextView
style="@style/setup1_item"
android:text="播放报警音乐#*alarm*#"
android:layout_margin="5dp"/>
<TextView
style="@style/setup1_item"
android:text="远程删除数据#*wipedata*#"
android:layout_margin="5dp"/>
<TextView
style="@style/setup1_item"
android:text="远程锁屏#*lockscreen*#"
android:layout_margin="5dp" />
</LinearLayout>


在LostFindActivity里还有一个resetup,重置能够回到九宫格

public void resetup(View v){
Intent intent = new Intent(this,Setup1Activity.class);
startActivity(intent);
finish();
}


至此UI基本完成,这样子框架就搭完毕了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: