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

淘忆项目之欢迎界面的归纳分享

2016-08-22 13:28 155 查看
淘忆项目之欢迎界面的修正归纳
欢迎界面,简单明了的文字,突出app的主题加意义就可以了。

欢迎界面,第一个功能加入是否首次进入App的判定来表示欢迎界面之后是主界面还是引导界面,第二个功能是实现用户登录,这样加强用户的交互效果,让再次进入app的时候能够实现自动登录,避免用户多次登录的繁琐,第三个功能就是简单说明App的主旨。

第一:

用photoshop CC 2015.5绘制UI界面,并且用CutterMan截下图标背景等。

 


第二,在AndroidManfest.xml中加入:

顺便改变一下图标,用photoshop做图标,截四种规格的图标


 
android:icon="@mipmap/ic_launcher"
设置启动界面:

<activity
android:name=".ui.activity.WelcomeActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN"
/>

        <category android:name="android.intent.category.LAUNCHER"
/>
    </intent-filter>
</activity>
主要实现WelcomeActivity作为app进入的第一个界面,也就是启动界面。

第三,布局文件的书写:

<?xml version="1.0"
encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/bg_welcome" //用photoshop做的界面背景
    tools:context=".ui.activity.WelcomeActivity">

    <TextView
        android:id="@+id/tv_taoyi_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:text="淘忆"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#fff"
        android:textSize="40sp"
        android:textStyle="bold"
/>

    <TextView
        android:id="@+id/tv_taoyi_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_taoyi_name"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="15dp"
        android:text="喧闹城市,静谧之处"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="#fff"
        android:textSize="18sp"
/>

</RelativeLayout>
用RelativeLayout和两个TextView就可以实现欢迎界面。

第四:WelcomeActivity.java的书写:

package
com.elainetaylor.blog.ui.activity;

import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.text.TextUtils;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.TextView;

import com.android.volley.AuthFailureError;
import com.android.volley.Request;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.elainetaylor.blog.R;
import com.elainetaylor.blog.common.BaseActivity;
import com.elainetaylor.blog.common.UrlUtils;

import org.json.JSONException;
import org.json.JSONObject;

import java.util.HashMap;
import java.util.Map;

public class WelcomeActivity
extends BaseActivity { 自定义BaseActivity
    private
TextView tvTaoyiNam,
tvTaoyiContent;
    private boolean isFirstIn
= false;
    private static final int TIME
= 3000;
    private static final int GO_HOME
= 0;
    private static final int GO_GUIDE
= 1;
    private Handler
handler =
new Handler() { //接受信息来执行进入引导页还是主页
        @Override
        public void
handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case
GO_HOME:
                    new
Thread(new
Runnable() { //开启新线程避免出现卡顿现象
                        @Override
                        public void
run() {
                            tryLogin();
                        }
                    }).start();
                    goHome();
                    break;
                case GO_GUIDE:
                    goGuide();
                    break;
            }

        }
    };

    @Override
    protected void
onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_welcome);
        init(); //初始化控件
        initRequestQueue(); //初始化RequestQueue
        write(); //写下isFirstIn的值
        startAnimation(); //启动动画效果
    }

    public void
tryLogin() {
        SharedPreferences sharedPreferences = getSharedPreferences("mes",
MODE_PRIVATE);
        final String username = sharedPreferences.getString("username",
"");
        final String password = sharedPreferences.getString("password",
"");
        if (TextUtils.isEmpty(username) || TextUtils.isEmpty(password))
{ //判断username和password是否为空
            writeUserDataTwo();
        }
else {
            StringRequest request =
new StringRequest(Request.Method.POST,
UrlUtils.getLoginUrl(), new
Response.Listener<String>() {
                @Override
                public void
onResponse(String s) {
                    try
{ //json数据解析
                        JSONObject object =
new JSONObject(s);
                        String msg = object.getString("msg");
                        if (msg.equals("登陆成功")) { //这是根据服务器端传出的数据来判断的。
                            String userId = object.getString("userId");
                            writeUserData(userId);
                        }
else {
                            writeUserDataTwo();
                        }
                    } catch
(JSONException e) {
                        e.printStackTrace();
                        writeUserDataTwo();
                    }
                }
            }, new
Response.ErrorListener() {
                @Override
                public void
onErrorResponse(VolleyError volleyError) {
                    writeUserDataTwo();
                }
            }) {
//传入数据才可以提交判断是否登录成功
                @Override
                protected
Map<String,
String> getParams()
throws AuthFailureError {
                    Map<String,
String> params = new
HashMap<>();
                    params.put("username",
username);
                    params.put("password",
password);
                    return params;
                }
            };
            addRequestQueue(request);
        }
    }
//如果登录成功则写下isLogin为true,并且写下userId
    public void
writeUserData(String userId) {
        SharedPreferences sharedPreferences = getSharedPreferences("mes",
MODE_PRIVATE);
        SharedPreferences.Editor editor = sharedPreferences.edit();
        editor.putBoolean("isLogin", true);
        editor.putString("userId",
userId);
        editor.apply();
    }
//如果登录失败就写下isLogin为false
    public void
writeUserDataTwo() {
        SharedPreferences sharedPreferences = getSharedPreferences("mes",
MODE_PRIVATE);
        SharedPreferences.Editor editor = sharedPreferences.edit();
        editor.putBoolean("isLogin",false);
        editor.apply();
    }

    public void
init() {
        tvTaoyiNam
= (TextView) findViewById(R.id.tv_taoyi_name);
        tvTaoyiContent
= (TextView) findViewById(R.id.tv_taoyi_content);
    }

    public void
write() {
        SharedPreferences preferences = getSharedPreferences("isFirstIn",
MODE_PRIVATE);
        isFirstIn
= preferences.getBoolean("isFirstIn", true);
        if (!isFirstIn) {
            handler.sendEmptyMessageDelayed(GO_HOME,
TIME);
        }
else {
            handler.sendEmptyMessageDelayed(GO_GUIDE,
TIME);
            SharedPreferences.Editor editor = preferences.edit();
            editor.putBoolean("isFirstIn", false);
            editor.apply();
        }
    }
//用布局文件去调动动画效果
    public void
startAnimation() {
        Animation animation = AnimationUtils.loadAnimation(WelcomeActivity.this,
R.anim.welcome_text);
        tvTaoyiNam.startAnimation(animation);
        tvTaoyiContent.startAnimation(animation);
    }
//主界面启动
    public void
goHome() {
        Intent i = new
Intent(WelcomeActivity.this,
MainActivity.class);
        startActivity(i);
        finish();
    }
//引导界面的启动
    public void
goGuide() {
        Intent intent = new
Intent(WelcomeActivity.this,
GuideActivity.class);
        startActivity(intent);
        finish();
    }

}
第五:Welcome_text.xml的书写:

用布局文件会显得整体比较整洁,所以我用的是布局文件,比较方便。

<?xml version="1.0"
encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromAlpha="0.0"
    android:toAlpha="1.0">
第六:BaseActivity.java的书写:

private
RequestQueue queue;

public void initRequestQueue(){
    queue= Volley.newRequestQueue(this);
}

public void addRequestQueue(StringRequest  request){
    queue.add(request);
}
加入RequestQueue的初始化和添加request的方法,这一步需要添加Volley的jar包。

第七:首先还是需要初始化一些界面的内容,建完项目之后,先初始化这些内容:

初始化style.xml中的颜色数据和ActionBar,title等。

<resources>
    <!-- Base application theme. -->
    <style
name="AppTheme"
parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item
name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">#000</item>
        <item name="colorAccent">#5cd0c2</item>
        <item name="android:windowActionBar">true</item>
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">true</item>
        <item name="windowNoTitle">true</item>
    </style>
</resources>
color.xml文件中的三个数据:

<?xml version="1.0"
encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#00b7ee</color>
    <color name="colorPrimaryDark">#00b7ee</color>
    <color name="colorAccent">#00b7ee</color>
</resources>
string.xml文件中的appName:

<resources>
    <string name="app_name">淘忆</string>
</resources>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息