鞋子商店APP源碼和設計報告
實 驗 報 告
課程名稱
實驗名稱
指導教師
專業(yè)
班級
學號
姓名
一、需求分析
1.需求分析
隨著互聯(lián)網(wǎng)和手機技術的蓬勃發(fā)展，網(wǎng)購已經(jīng)成為許多人，尤其是年輕人的主要消費方式，這就對手機購物APP產(chǎn)生了大量的需求，商品的展示環(huán)節(jié)更是尤為重要的額一環(huán)。本次實驗制作了一款鞋子商品展示的APP，包括了鞋子商品的品牌，圖片，文字和視頻介紹。讓消費者直觀看到鞋子的各方面信息。同時采用登入注冊功能，來保護消費者信息。
技術原理
（1）頁面布局：使用線性布局并用ScrollView實現(xiàn)頁面上下滑動。
（2）數(shù)據(jù)庫：SharedPreferences是Android平臺，上一個輕量級的存儲類，用來保存應用的一些常用配置，比如Activity狀態(tài)，Activity 暫停時，將此actity的狀態(tài)保存到SharedPereferences中;當Activity重載，系統(tǒng)回調方法onSavelnstanceState時，再從SharedPreferences中將值取出。
（3）MD5加密算法：①一致性檢驗，最.上面那個例子②數(shù)字簽名，還是最上面那個例子。只是把md5看出了一個指紋，按了個手印說明獨一無二了。③安全訪問認證，這個就是平時系統(tǒng)設計的問題了。
在用戶注冊時，會將密碼進行md5加密，存到數(shù)據(jù)庫中。這樣可以防止那些可以看到數(shù)據(jù)庫數(shù)據(jù)的人，惡意操作了。
（4）控件的使用：Textview 、Edittext、Button、ImageView 等
詳細設計
主頁面：首頁面是一個進入軟件的頁面，包括一個打開軟件的按鈕。
登錄頁面：登陸頁面包含了三個按鈕，左上方按鈕。可以返回上一級。登陸按鈕可以進行的登陸功能注冊按鈕可以跳轉到注冊頁面。頁面包含了兩個文本框，分別可以輸入用戶名和密碼。輸入的用戶名和密碼會進行核對。如果用戶名不存在，點擊登陸按鈕會提示用戶不存在。如果密碼輸入錯誤，點擊登錄按鈕會提示密碼輸入錯誤。
注冊頁面：注冊頁面一共包括兩個按鈕，左上角還是返回上一級。注冊按鈕可以進行賬戶注冊的功能。注冊頁面包含三個文本框。分別是輸入用戶名，輸入密碼和第二次輸入密碼。輸輸入的密碼會進行加密儲存在SharedPreferences中。當兩次密碼輸入不一致時，點擊注冊按鈕會提示兩次密碼輸入不一致。如果用戶名已經(jīng)注冊過，點擊注冊按鈕會提示用戶名已存在。注冊成功后，點擊注冊按鈕就會跳轉到登錄頁面，并把注冊的用戶名傳輸?shù)降侨腠撁嫔稀?br>分類頁面：分類頁面一共包含三個按鈕，左上角的返回按鈕可以返回到上一級。剩下兩個按鈕為鞋子的品牌分類按鈕起到一個導航的作用，可以清晰直觀的看到鞋子的分類。點擊分類按鈕后，可以跳轉到相應的品牌鞋子的圖片和文字介紹頁面。
子頁面：商品子頁面包含兩個按鈕，左上角是返回上一級。查看視頻按鈕，可以進入到視頻播放頁面觀看這個鞋子的詳細視頻介紹。整體采用線性布局，包含上方熱賣商品鞋子的線性布局和下方全部鞋子的滑動布局。
播放視頻頁面：視頻播放頁面包含三個按鈕，左上角按鈕可以返回商品此頁面視頻下方兩個按鈕分別為開始按鈕和結束按鈕，可以控制視頻的播放和結束。系統(tǒng)實現(xiàn)和使用說明
系統(tǒng)實現(xiàn)
（1）登入實現(xiàn)
public class?LoginActivity?extends?AppCompatActivity {
private?TextView?tv_main_title;//標題
private?TextView?tv_back,tv_register,tv_find_psw;//返回鍵,顯示的注冊，找回密碼
private?Button?btn_login;//登錄按鈕
private?String?userName,psw,spPsw;//獲取的用戶名，密碼，加密密碼
private?EditText?et_user_name,et_psw;//編輯框
@Override
protected void?onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
//設置此界面為豎屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
init();
}
//獲取界面控件
private void?init() {
//從main_title_bar中獲取的id
tv_main_title=findViewById(R.id.tv_main_title);
tv_main_title.setText(“登錄”);
tv_back=findViewById(R.id.tv_back);
//從activity_login.xml中獲取的
tv_register=findViewById(R.id.tv_register);
tv_find_psw=findViewById(R.id.tv_find_psw);
btn_login=findViewById(R.id.btn_login);
et_user_name=findViewById(R.id.et_user_name);
et_psw=findViewById(R.id.et_psw);
//返回鍵的點擊事件
tv_back.setOnClickListener(new?View.OnClickListener() {
@Override
public void?onClick(View v) {
//登錄界面銷毀
LoginActivity.this.finish();
}
});
//立即注冊控件的點擊事件
tv_register.setOnClickListener(new?View.OnClickListener() {
@Override
public void?onClick(View v) {
//為了跳轉到注冊界面，并實現(xiàn)注冊功能
Intent intent=new?Intent(LoginActivity.this,RegisterActivity.class);
startActivityForResult(intent, 1);
}
});
//找回密碼控件的點擊事件
tv_find_psw.setOnClickListener(new?View.OnClickListener() {
@Override
public void?onClick(View v) {
//跳轉到找回密碼界面（此頁面暫未創(chuàng)建）
}
});
//登錄按鈕的點擊事件
btn_login.setOnClickListener(new?View.OnClickListener() {
@Override
public void?onClick(View v) {
//開始登錄，獲取用戶名和密碼 getText().toString().trim();
userName=et_user_name.getText().toString().trim();
psw=et_psw.getText().toString().trim();
//對當前用戶輸入的密碼進行MD5加密再進行比對判斷, MD5Utils.md5( ); psw 進行加密判斷是否一致
String md5Psw= MD5Utils.md5(psw);
// md5Psw ; spPsw 為 根據(jù)從SharedPreferences中用戶名讀取密碼
// 定義方法 readPsw為了讀取用戶名，得到密碼
spPsw=readPsw(userName);
// TextUtils.isEmpty
if(TextUtils.isEmpty(userName)){
Toast.makeText(LoginActivity.this,?“請輸入用戶名”, Toast.LENGTH_SHORT).show();
return;
}else if(TextUtils.isEmpty(psw)){
Toast.makeText(LoginActivity.this,?“請輸入密碼”, Toast.LENGTH_SHORT).show();
return;
// md5Psw.equals(); 判斷，輸入的密碼加密后，是否與保存在SharedPreferences中一致
}else if(md5Psw.equals(spPsw)){
//一致登錄成功
Toast.makeText(LoginActivity.this,?“登錄成功”, Toast.LENGTH_SHORT).show();
//保存登錄狀態(tài)，在界面保存登錄的用戶名 定義個方法 saveLoginStatus boolean 狀態(tài) , userName 用戶名;
saveLoginStatus(true,?userName);
//登錄成功后關閉此頁面進入主頁
Intent data=new?Intent();
//datad.putExtra( ); name , value ;
data.putExtra(“isLogin”,true);
//RESULT_OK為Activity系統(tǒng)常量，狀態(tài)碼為-1
// 表示此頁面下的內(nèi)容操作成功將data返回到上一頁面，如果是用back返回過去的則不存在用setResult傳遞data值
setResult(RESULT_OK,data);
//銷毀登錄界面
LoginActivity.this.finish();
//跳轉到主界面，登錄成功的狀態(tài)傳遞到 MainActivity 中
startActivity(new?Intent(LoginActivity.this,Classification.class));
return;
}else if((spPsw!=null&&!TextUtils.isEmpty(spPsw)&&!md5Psw.equals(spPsw))){
Toast.makeText(LoginActivity.this,?“輸入的用戶名和密碼不一致”, Toast.LENGTH_SHORT).show();
return;
}else{
Toast.makeText(LoginActivity.this,?“此用戶名不存在”, Toast.LENGTH_SHORT).show();
}
}
});
}
/**
*從SharedPreferences中根據(jù)用戶名讀取密碼
*/
private?String readPsw(String userName){
//getSharedPreferences(“l(fā)oginInfo”,MODE_PRIVATE);
//”loginInfo”,mode_private; MODE_PRIVATE表示可以繼續(xù)寫入
SharedPreferences sp=getSharedPreferences(“l(fā)oginInfo”,?MODE_PRIVATE);
//sp.getString() userName, “”;
return?sp.getString(userName ,?“”);
}
/**
*保存登錄狀態(tài)和登錄用戶名到SharedPreferences中
*/
private void?saveLoginStatus(boolean?status,String userName){
//saveLoginStatus(true, userName);
//loginInfo表示文件名 SharedPreferences sp=getSharedPreferences(“l(fā)oginInfo”, MODE_PRIVATE);
SharedPreferences sp=getSharedPreferences(“l(fā)oginInfo”,?MODE_PRIVATE);
//獲取編輯器
SharedPreferences.Editor editor=sp.edit();
//存入boolean類型的登錄狀態(tài)
editor.putBoolean(“isLogin”, status);
//存入登錄狀態(tài)時的用戶名
editor.putString(“l(fā)oginUserName”, userName);
//提交修改
editor.commit();
}
/**
* 注冊成功的數(shù)據(jù)返回至此
*?@param requestCode?請求碼
*?@param resultCode?結果碼
*?@param data?數(shù)據(jù)
*/
@Override
//顯示數(shù)據(jù)， onActivityResult
//startActivityForResult(intent, 1); 從注冊界面中獲取數(shù)據(jù)
//int requestCode , int resultCode , Intent data
// LoginActivity -> startActivityForResult -> onActivityResult();
protected void?onActivityResult(int?requestCode,?int?resultCode, Intent data) {
//super.onActivityResult(requestCode, resultCode, data);
super.onActivityResult(requestCode, resultCode, data);
if(data!=null){
//是獲取注冊界面回傳過來的用戶名
// getExtra().getString(“***”);
String userName=data.getStringExtra(“userName”);
if(!TextUtils.isEmpty(userName)){
//設置用戶名到 et_user_name 控件
et_user_name.setText(userName);
//et_user_name控件的setSelection()方法來設置光標位置
et_user_name.setSelection(userName.length());
}
}
}}
（2）注冊實現(xiàn)
public class?RegisterActivity?extends?AppCompatActivity {
private?TextView?tv_main_title;//標題
private?TextView?tv_back;//返回按鈕
private?Button?btn_register;//注冊按鈕
//用戶名，密碼，再次輸入的密碼的控件
private?EditText?et_user_name,et_psw,et_psw_again;
//用戶名，密碼，再次輸入的密碼的控件的獲取值
private?String?userName,psw,pswAgain;
//標題布局
private?RelativeLayout?rl_title_bar;
@Override
protected void?onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//設置頁面布局 ,注冊界面
setContentView(R.layout.activity_register);
//設置此界面為豎屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
init();
}private void?init() {
//從main_title_bar.xml 頁面布局中獲取對應的UI控件
tv_main_title=findViewById(R.id.tv_main_title);
tv_main_title.setText(“注冊”);
tv_back=findViewById(R.id.tv_back);
//布局根元素
rl_title_bar=findViewById(R.id.title_bar);
rl_title_bar.setBackgroundColor(Color.TRANSPARENT);
//從activity_register.xml 頁面中獲取對應的UI控件
btn_register=findViewById(R.id.btn_register);
et_user_name=findViewById(R.id.et_user_name);
et_psw=findViewById(R.id.et_psw);
et_psw_again=findViewById(R.id.et_psw_again);
tv_back.setOnClickListener(new?View.OnClickListener() {
@Override
public void?onClick(View v) {
//返回鍵
RegisterActivity.this.finish();
}
});
//注冊按鈕
btn_register.setOnClickListener(new?View.OnClickListener() {
@Override
public void?onClick(View v) {
//獲取輸入在相應控件中的字符串
getEditString();
//判斷輸入框內(nèi)容
if(TextUtils.isEmpty(userName)){
Toast.makeText(RegisterActivity.this,?“請輸入用戶名”, Toast.LENGTH_SHORT).show();
return;
}else if(TextUtils.isEmpty(psw)){
Toast.makeText(RegisterActivity.this,?“請輸入密碼”, Toast.LENGTH_SHORT).show();
return;
}else if(TextUtils.isEmpty(pswAgain)){
Toast.makeText(RegisterActivity.this,?“請再次輸入密碼”, Toast.LENGTH_SHORT).show();
return;
}else if(!psw.equals(pswAgain)){
Toast.makeText(RegisterActivity.this,?“輸入兩次的密碼不一樣”, Toast.LENGTH_SHORT).show();
return;
/**
*從SharedPreferences中讀取輸入的用戶名，判斷SharedPreferences中是否有此用戶名
*/
}else if(isExistUserName(userName)){
Toast.makeText(RegisterActivity.this,?“此賬戶名已經(jīng)存在”, Toast.LENGTH_SHORT).show();
return;
}else{
Toast.makeText(RegisterActivity.this,?“注冊成功”, Toast.LENGTH_SHORT).show();
//把賬號、密碼和賬號標識保存到sp里面
/**
* 保存賬號和密碼到SharedPreferences中
*/
saveRegisterInfo(userName,?psw);
//注冊成功后把賬號傳遞到LoginActivity.java中
// 返回值到loginActivity顯示
Intent data =?new?Intent();
data.putExtra(“userName”,?userName);
setResult(RESULT_OK, data);
//RESULT_OK為Activity系統(tǒng)常量，狀態(tài)碼為-1，
// 表示此頁面下的內(nèi)容操作成功將data返回到上一頁面，如果是用back返回過去的則不存在用setResult傳遞data值
RegisterActivity.this.finish();
}
}
});
}
/**
* 獲取控件中的字符串
*/
private void?getEditString(){
userName=et_user_name.getText().toString().trim();
psw=et_psw.getText().toString().trim();
pswAgain=et_psw_again.getText().toString().trim();
}
/**
* 從SharedPreferences中讀取輸入的用戶名，判斷SharedPreferences中是否有此用戶名
*/
private boolean?isExistUserName(String userName){
boolean?has_userName=false;
//mode_private SharedPreferences sp = getSharedPreferences( );
// “l(fā)oginInfo”, MODE_PRIVATE
SharedPreferences sp=getSharedPreferences(“l(fā)oginInfo”,?MODE_PRIVATE);
//獲取密碼
String spPsw=sp.getString(userName,?“”);//傳入用戶名獲取密碼
//如果密碼不為空則確實保存過這個用戶名
if(!TextUtils.isEmpty(spPsw)) {
has_userName=true;
}
return?has_userName;
}
/**
* 保存賬號和密碼到SharedPreferences中SharedPreferences
*/
private void?saveRegisterInfo(String userName,String psw){
String md5Psw = MD5Utils.md5(psw);//把密碼用MD5加密
//loginInfo表示文件名, mode_private SharedPreferences sp = getSharedPreferences( );
SharedPreferences sp=getSharedPreferences(“l(fā)oginInfo”,?MODE_PRIVATE);
//獲取編輯器， SharedPreferences.Editor editor -> sp.edit();
SharedPreferences.Editor editor=sp.edit();
//以用戶名為key，密碼為value保存在SharedPreferences中
//key,value,如鍵值對，editor.putString(用戶名，密碼）;
editor.putString(userName, md5Psw);
//提交修改 editor.commit();
editor.commit();
}
}使用說明
圖1 進入界面
圖2 登錄界面
圖3 注冊界面
圖4 登陸成功主界面
圖5 子界面
圖6 商品視頻界面
（4）點擊返回鍵，跳轉回上一界面。
系統(tǒng)測試
進入登錄界面，點擊“登錄”，顯示登陸成功
五、總結
隨著互聯(lián)網(wǎng)的發(fā)展，互聯(lián)網(wǎng)廣泛的被應用在人們的生活中，UI設計也越來越被需要，本次實驗的要求就是關于UI設計以及多用戶界面切換功能的實現(xiàn)，想要完成一個好的界面設計，必須要大量的看好的作品提升自己。在實驗中我也遇到了一些問題，比如常見的activity忘記注冊以及一些細微的錯誤就可能導致程序運行錯誤而這些問題只有在自己實際的操作中才能體會并解決，然后牢牢的記住這些問題，而且我們必須明白一個色彩絢麗的界面不僅不能增加美感還會給用戶操作帶來不便，設計成功的界面是簡潔的而且要邏輯合理我們可以站在客戶的角度上去進行設計。而在android開發(fā)過程中，界面切換是我們必須要掌握的，界面切換是指從一個activity跳轉到另一個activity，實現(xiàn)界面之間的跳轉和數(shù)據(jù)傳遞，這是開發(fā)過程中非常重要的一部分。通過本次實驗，我在編程方面有很大的收獲，了解到了自己存在的不足,但是也對基本的開發(fā)過程有了一定的了解，以后一定會在編程上多下功夫。
源碼鏈接：https://yunjunet.cn/875422.html
