Android UIのシンプルな美化
16778 ワード
Android UIのシンプルな美化
Selector(セレクタ)
activity_main.xml
etxt_selector.xml
各ActoinBarにクリック後の様子を設定します.
shape
Selectorは選択状態と非選択状態のスタイル(if elseに似ている)しか設定できませんが、shapeの内容は豊富ですので、効果図を見てみましょう.
Activity_main.xml
上はEditTextで、下にはTextView 10000元があります.この実現も簡単です.shapeの形を変えればいいです.
SelectorとShapeを理解した後、両者の結合版を見てみましょう.まだよく使われています.
同様にEditTextのセレクタを設定し、
セレクタに選択したディスプレイのshapeを設定する
最後にグラフィックshapeの表示内容を設定します
ここのセレクタは、コントロールが選択されたかどうかの結果を受け入れ、特定のshape表示を呼び出す中間作用のブリッジに相当することがわかります.
DrawerLayoutレイアウトの使用:
QQの右側のスライドは新しいページが大部分のスクリーンを占めて、これはDrawerLayout(引き出し)のレイアウトで、効果図:
直接コード:
MainActivity.java
コードを見終わったら、引き出しのレイアウト(android.support.v 4.widget.DrawerLayout)をXMLにパッケージ名を書く必要があります.クラス名は、全体のレイアウトを引き出しの中に置く必要があり、2つのLinearLayoutがそれぞれスクリーンとスクリーンの外側を占め、スライド(スライドしているのは引き出し)するとスクリーンの外側を内側に引き込む効果があるので、この名前が付けられています.しかし、このような書き方DrawerLayoutがActionBarを覆っていないのは、ナビゲーションがLayoutに属していないため、ActionBarナビゲーションをカスタマイズする必要があるからです.
action
MainActivity.java
効果図:
回転ランプ移動ズームの効果:
resにanimフォルダを新規作成し(resにフォルダ名を勝手に付けないで)、rotateを新規作成します.xml alpha.xml trans.xml scale.xml
rotate.xml
MainActivity.java
Selector(セレクタ)
activity_main.xml
<!-- background -->
<EditText
android:id="@+id/ed2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/etext_seleector" />etxt_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- con_watermarkvideo_porogressbar_played -->
<item android:state_focused="true" android:drawable="@drawable/con_watermarkvideo_porogressbar_played"></item>
<item android:drawable="@drawable/con_watermarkvideo_porogressbar_notplay"></item>
</selector>各ActoinBarにクリック後の様子を設定します.
actionBar=getActionBar();
//
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
//
Tab tab=actionBar.newTab().setIcon(R.drawable.tab1_selector).setTabListener(MainActivity.this);
//
actionBar.addTab(tab);
tab=actionBar.newTab().setIcon(R.drawable.tab2_selector).setTabListener(MainActivity.this);
actionBar.addTab(tab);shape
Selectorは選択状態と非選択状態のスタイル(if elseに似ている)しか設定できませんが、shapeの内容は豊富ですので、効果図を見てみましょう.
Activity_main.xml
<EditText
android:id="@+id/etxt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/etxt_shape" /><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- -->
<corners android:radius="5dp"
></corners>
<!-- -->
<stroke android:width="2px"
android:color="#0000ff"></stroke>
<!-- padding -->
<padding android:left="10dp"
android:top="10dp"></padding>
<!-- -->
<solid android:color="#00ff00"></solid>
<!-- -->
<size android:width="200dp"
android:height="20dp"/>
<!-- -->
<gradient
android:startColor="#ff0000"
android:centerColor="#00ff00"
android:endColor="#0000ff"></gradient>
</shape>上はEditTextで、下にはTextView 10000元があります.この実現も簡単です.shapeの形を変えればいいです.
android:shape="line"SelectorとShapeを理解した後、両者の結合版を見てみましょう.まだよく使われています.
同様にEditTextのセレクタを設定し、
<EditText
android:id="@+id/etxt1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/etxt_selector"/>セレクタに選択したディスプレイのshapeを設定する
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true" android:drawable="@drawable/shape_f"></item>
<item android:drawable="@drawable/shape_nf"></item>
</selector>
最後にグラフィックshapeの表示内容を設定します
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- -->
<corners
android:radius="5dp"></corners>
<!-- -->
<stroke
android:width="2px"
android:color="#0000ff"></stroke>
<!-- -->
<size
android:width="200dp"
android:height="40dp"></size>
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp"></padding>
</shape>ここのセレクタは、コントロールが選択されたかどうかの結果を受け入れ、特定のshape表示を呼び出す中間作用のブリッジに相当することがわかります.
DrawerLayoutレイアウトの使用:
QQの右側のスライドは新しいページが大部分のスクリーンを占めて、これはDrawerLayout(引き出し)のレイアウトで、効果図:
直接コード:
MainActivity.java
package com.example.drawlayout;
import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.ActionBar.TabListener;
import android.app.Activity;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
public class MainActivity extends Activity implements TabListener{
ImageView img;
DrawerLayout dl;
LinearLayout left;
ListView listview;
ActionBar actionBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
actionBar=getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
Tab tab = actionBar.newTab().setText(" 1").setTabListener(this);
actionBar.addTab(tab);
tab = actionBar.newTab().setText(" 2").setTabListener(this);
actionBar.addTab(tab);
dl = (DrawerLayout) findViewById(R.id.dl);
left=(LinearLayout) findViewById(R.id.left);
listview = (ListView) findViewById(R.id.listview);
listview.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,new String[]{" 1"," 2"," 3"}));
listview.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
dl.closeDrawer(left);
}
});
}
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
@Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
}
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/dl"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/context"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:id="@+id/left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="left"
android:background="#0000FF">
<ListView
android:id="@+id/listview"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>コードを見終わったら、引き出しのレイアウト(android.support.v 4.widget.DrawerLayout)をXMLにパッケージ名を書く必要があります.クラス名は、全体のレイアウトを引き出しの中に置く必要があり、2つのLinearLayoutがそれぞれスクリーンとスクリーンの外側を占め、スライド(スライドしているのは引き出し)するとスクリーンの外側を内側に引き込む効果があるので、この名前が付けられています.しかし、このような書き方DrawerLayoutがActionBarを覆っていないのは、ナビゲーションがLayoutに属していないため、ActionBarナビゲーションをカスタマイズする必要があるからです.
action
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RadioGroup
android:id="@+id/fenzu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/dao1"
style="@style/radio"
android:text=" 1" />
<RadioButton
style="@style/radio"
android:id="@+id/dao2"
android:text=" 2" />
<RadioButton
android:id="@+id/dao3"
style="@style/radio"
android:layout_height="wrap_content"
android:text=" 3" />
</RadioGroup>
<!-- -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/t1"
style="@style/textview"
android:background="#00FF00" />
<TextView
android:id="@+id/t2"
style="@style/textview"
android:visibility="invisible" />
<TextView
android:id="@+id/t3"
style="@style/textview"
android:visibility="invisible" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#00FF00"
android:orientation="vertical" >
<Button
android:id="@+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=" " />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>MainActivity.java
public class MainActivity extends Activity {
RadioGroup rg;
TextView t1,t2,t3;
Button btn ;
DrawerLayout dl;
LinearLayout left;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
left=(LinearLayout) findViewById(R.id.left);
dl=(DrawerLayout) findViewById(R.id.container);
rg=(RadioGroup) findViewById(R.id.fenzu);
t1=(TextView) findViewById(R.id.t1);
t2=(TextView) findViewById(R.id.t2);
t3=(TextView) findViewById(R.id.t3);
rg.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.dao1:
t1.setVisibility(View.VISIBLE);
t2.setVisibility(View.INVISIBLE);
t3.setVisibility(View.INVISIBLE);
break;
case R.id.dao2:
t1.setVisibility(View.INVISIBLE);
t2.setVisibility(View.VISIBLE);
t3.setVisibility(View.INVISIBLE);
break;
case R.id.dao3:
t1.setVisibility(View.INVISIBLE);
t2.setVisibility(View.INVISIBLE);
t3.setVisibility(View.VISIBLE);
break;
default:
break;
}
}
});
btn=(Button) findViewById(R.id.btn);
btn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// LinerLayuot
dl.closeDrawer(left);
}
});
}
}効果図:
回転ランプ移動ズームの効果:
resにanimフォルダを新規作成し(resにフォルダ名を勝手に付けないで)、rotateを新規作成します.xml alpha.xml trans.xml scale.xml
public void onClick(View view) {
Animation anim=null;
switch (view.getId()) {
case R.id.btnAlpha://
//
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);
break;
case R.id.btnRot://
//
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
break;
case R.id.btnScale://
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);
break;
case R.id.btnTran://
anim=AnimationUtils.loadAnimation(MainActivity.this, R.anim.trans);
break;
default:
break;
}
//
imgv.startAnimation(anim);
}rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000">
<!-- fromDegrees
toDegrees
pivotX、pivotY -->
</rotate><?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<!-- fromAlpha -->
<!-- duration -->
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="1000"
></alpha>
</set>
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:toXDelta="100%p"
android:fromYDelta="0%"
android:toYDelta="100%p"
android:duration="1000">
<!-- fromXDelta X
toXDelta X -->
</translate><?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1"
android:toXScale="3"
android:fromYScale="1"
android:toYScale="3"
android:duration="1000">
<!-- pivotX、 pivotY
fromXScale X
toXScale X -->
</scale>MainActivity.java
public class MainActivity extends Activity implements OnClickListener{
private ImageView imgv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.btnAlpha).setOnClickListener(this);
findViewById(R.id.btnRot).setOnClickListener(this);
findViewById(R.id.btnScale).setOnClickListener(this);
findViewById(R.id.btnTran).setOnClickListener(this);
imgv=(ImageView) findViewById(R.id.imgv);
}
@Override
public void onClick(View view) {
Animation anim=null;
switch (view.getId()) {
case R.id.btnAlpha://
//
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);
break;
case R.id.btnRot://
//
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
break;
case R.id.btnScale://
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);
break;
case R.id.btnTran://
anim=AnimationUtils.loadAnimation(MainActivity.this, R.anim.trans);
break;
default:
break;
}
//
imgv.startAnimation(anim);
}
}