📜 ⬆️ ⬇️

§ 2. Interface design, transition class - Intent

I thank those readers who follow the errors, especially the semantic. I write these paragraphs in word'e, where they look more readable, do I have to, or lay them out? If so, in what format? Do I need to lay out the source? I also remind you that I publish all these paragraphs and other news on the gglphone.com blog .

Consider the most important part of creating an application - interface design. As in any other industry, and in mobile applications, a poorly designed interface can sometimes significantly reduce the number of potential users. A competent interface is the psychology of interaction between the program and the user, the effect that will be obtained as a result of the program's work.
Let's start with building the simplest interface - the Login + PIN code form and, for a change, add some animation effect.


We have a simple code:
package com.google.android.hello;

import android.app.Activity;
import android.os.Bundle;
public class HelloAndroid extends Activity {

@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
}
}


Run and see the following result:
')


How did this happen? Everything is very simple. Team SetContentView () - loads Layout for the current Activity class. Layout is a description of our interface. For our Activity class, we load Layout.main, the description of which is in the main.xml file, and this file is located in the layout folder, which in turn is located in the project’s res folder.



Now let's figure out how the main.xml file works.



The image shows the structure of the elements. The main element LinearLayout contains all other elements (TextView, EditText). They will be displayed in the order in which they are displayed.
Each element has a set of attributes with which we can control the element. For example, if you want to indent from the edges of the screen, we put the android attribute: padding = 10 dip. For greater clarity, I will provide the main.xml file in its real form:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#c7c7c7"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dip">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Login" />
<EditText
android:maxLines="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
id="@+id/login" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Pin code" />
<EditText
android:maxLines="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:password="true"
id="@+id/pin" />


With attributes everything is clear. Let's move on to adding the shake effect of our form. The essence of the effect is animation, if the user enters a pin code, not four characters long, the input window shakes. If you enter the pin code correctly, go to the next window. To do this, we need to add a procedure that is activated after the user has entered the data. First, in the Activity class, we create two objects:
EditText editLogin;
EditText editPassword;

We link them with the description in the main.xml file via id, and add the function setOnClickListener (), which is waiting for input.
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
editLogin = ((EditText) this.findViewById(R.id.login));
editPin = ((EditText) this.findViewById(R.id.pin));
editPin.setOnClickListener(this);
}

Further, in order not to exaggerate for a long time - I will give all the code with comments.
package com.google.android.hello;

//
import android.app.Activity;
import android.app.NotificationManager;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.EditText;

public class HelloAndroid extends Activity implements View.OnClickListener{
EditText editLogin;
EditText editPin;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
editLogin = ((EditText) this.findViewById(R.id.login));
editPin = ((EditText) this.findViewById(R.id.pin));
editPin.setOnClickListener(this);
}
public void onClick(View v) {
// , xml shake.xml
Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);
//
NotificationManager nm = (NotificationManager)
getSystemService(NOTIFICATION_SERVICE);
// pass
String pass = editPin.getText().toString();
// 4
if( pass.length() == 4)
{
// , - "Welcome + "
nm.notifyWithText(R.id.login,
"Welcome "+editLogin.getText().toString(),
NotificationManager.LENGTH_SHORT, null);
//
Intent intent = new Intent();
intent.setClass(HelloAndroid.this, WelcomeAndroid.class);
startActivity(intent);
// Activity
finish();
}
else
{
// -
editPin.startAnimation(shake);
// "Wrong pin, must be 4 digits"
nm.notifyWithText(R.id.login,
"Wrong pin, must be 4 digits",
NotificationManager.LENGTH_SHORT, null);
//
editPin.setText("");
}
}

Let us dwell in more detail on some points. Class Intent, with the help of it, transitions between Activity windows are performed. We want to launch a new window, make welcome_android.xml description for it
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#c7c7c7"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dip">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Welcome Android" />


Accordingly, intent.setClass (HelloAndroid.this, WelcomeAndroid.class) sets the transition, and the startActivity (intent) function performs it.

When entering a 4-character PIN code and login, go to the next window:



I add what else you need to create xml for animation. To do this, create an anim folder in the res folder and two files in it:

cycle_7.xml
<?xml version="1.0" encoding="utf-8"?>
<CycleInterpolator
xmlns:android=http://schemas.android.com/apk/res/android android:cycles="7" />


shake.xml
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android=http://schemas.android.com/apk/res/android android:fromXDelta="0"
android:toXDelta="10"
android:duration="1000"
android:interpolator="@anim/cycle_7" />


Also do not forget to add to AndroidMainfest.xml:

<activity class=".WelcomeAndroid" android:label="@string/app_name">
That's basically all about building interfaces and transitions between windows.

The following paragraphs will be more specialized, in them I will consider the features of programming in the environment, therefore, carefully remember the basics, I will not explain and comment on them further.

Source: https://habr.com/ru/post/16386/


All Articles