User Interface

quaintmayoΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

73 εμφανίσεις


User Interface
Boonrit

kidngan

โครงสร้างของรี
ซอร์ส


res/
anim
/
จัดเก็บไฟล์ภาพเคลื่อนไหวใน
รูปแบบแฟ
รม


res/
drawable
/
จัดเก็บไฟล์ประเภทรูปภาพ


res/layout/
จัดเก็บไฟล์
XML
จัด
การเลย์เอาต์
หน้าจอ


res/values/
จัดเก็บไฟล์
XML
รี
ซอร์สของ
ระบบ เช่น

string.xml,color.xml




แอททริ
บิวต์
ขนาดของของออบเจ็กต์
UI


px

:
ค่า
พิกเซล
ของจอภาพ


dp

ค่า
พิกเซล
อ้างอิงตามจอขนาด
160
dpi


sp
ค่า
พิกเซล
อ้างอิงตามขนาดของฟอนต์ที่ผู้ใช้เลือกไว้


in
ค่าความยาวเป็นนิ้วที่วัดตามขนาดจริงของจอ


mm
ค่าความยาวเป็นมิลลิเมตรที่วัดตามจริงของจอ


pt
ค่าความยาว
1
/
72
นิ้วตามขนาดจริงของจอ

แอททริบิ
วต์สี
ของของออบเจ็กต์
UI


เก็บแบบค่าสี
12
bit #
rgb



เก็บแบบค่าสี
16
bit #
argb


เก็บแบบค่าสี
24
bit #
rrggbb


เก็บแบบค่าสี
32
bit #
aarrggbb


การประกาศจะประกาศในไฟล์
XML

ใน
res/values/colors.xml



<?xml version=
"
1
.
0
" encoding="utf
-
8
"?>


<resources>



<color name=
"red">#f
00
</color>


</resources>



<
TextView




android:layout_width
=
"
fill_parent
"



android:layout_height
=
"
wrap_content
"



android:textSize
=
"
50
px"



android:text
=
"Test"



android:textColor
=
"@color/red"



/
>


public void
onCreate
(Bundle
savedInstanceState
) {



super.onCreate
(
savedInstanceState
);



setContentView
(
R.layout.
main
);



TextView

tv
=(
TextView
)
findViewById
(R.id.
textview
1
);



int

c=
getResources
().
getColor
(
R.color.
red
);



tv.setTextColor
(c);


}

การควบคุมความสูงและความกว้าง


wrap_content

ก าหนดให้ค่ามีขนาดใหญ่เพียงพอกับ
ข้อความของวัตถุ


fill_parent

ก าหนดค่าสูงสุด รวมถึงพื้นที่ว่างรอบๆวัตถุ


padding
ก าหนดพื้นที่ว่างรอบวัตถุ


paddingLeft

,
paddingRight

,
paddingTop

,
paddingButtom


<?xml version=
"
1
.
0
" encoding="utf
-
8
"?>


<
LinearLayout



xmlns:android
=
"http://schemas.android.com/apk/res/android"



android:orientation
=
"horizontal"



android:layout_width
=
"
fill_parent
"



android:layout_height
=
"
fill_parent
">



<Button
android:text
=
"
11111
"



android:id
=
"@+id/button
1
"



android:layout_width
=
"
wrap_content
"



android:layout_height
=
"
fill_parent
“>
</Button>



<Button
android:text
=
"
22222
"



android:id
=
"@+id/button
2
"



android:layout_width
=
"
wrap_content
"



android:layout_height
=
"
wrap_content
"></Button>



<Button
android:text
=
"
33333
"



android:id
=
"@+id/button
3
"



android:layout_width
=
"
wrap_content
"



android:layout_height
=
"
wrap_content
"



android:paddingRight
=
"
50
px“>

</Button>


</
LinearLayout
>


LinearLayout


<
LinearLayout

xmlns:android
=


"http://schemas.android.com/apk/res/android"


android:orientation
="vertical"


android:layout_width
="
fill_parent
"


android:layout_height
="
fill_parent
"


>



<
TextView


android:layout_width
="
wrap_content
"


android:layout_height
="
wrap_content
"


android:text
="Element One"


/>


<
TextView


android:layout_width
="
wrap_content
"


android:layout_height
="
wrap_content
"


android:text
="Element Two"


/>


<
TextView


android:layout_width
="
wrap_content
"


android:layout_height
="
wrap_content
"


android:text
="Element Three"


/>


</
LinearLayout
>


RelativeLayout



<
RelativeLayout

xmlns:android
=


"http://schemas.android.com/apk/res/android"


android:layout_width
="
fill_parent
"


android:layout_height
="
fill_parent
"


>



<
TextView


android:id
="@+id/EL
01
"


android:layout_width
="
wrap_content
"


android:layout_height
="
wrap_content
"


android:text
="Element One"


/>


<
TextView


android:id
="@+id/EL
02
"


android:layout_width
="
wrap_content
"


android:layout_height
="
wrap_content
"


android:text
="Element Two"


android:layout_below
="@id/EL
01
"


/>


<
TextView


android:layout_width
="
wrap_content
"


android:layout_height
="
wrap_content
"


android:text
="Element Three"


android:layout_toRight
="@id/EL
02
"


/>


</
RelativeLayout
>


RelativeLayout




<?xml version=
"
1
.
0
" encoding="utf
-
8
"?>


<
RelativeLayout


xmlns:android
=
"http://schemas.android.com/apk/r
es/android"


android:layout_width
=
"
fill_parent
"


android:layout_height
=
"
fill_parent
">



<
TextView

android:id
=
"@+id/mid"


android:layout_width
=
"
wrap_content
"


android:layout_height
=
"
wrap_content
"


android:text
=
"mid"


android:layout_centerInParent
=
"true"


/
>


<
TextView

android:id
=
"@+id/high"


android:layout_width
=
"
wrap_content
"


android:layout_height
=
"
wrap_content
"


android:text
=
"high"


android:layout_above
=
"@id/mid"


/
>

<
TextView

android:id
=
"@+id/low"

android:layout_width
=
"
wrap_content
"

android:layout_height
=
"
wrap_content
"

android:text
=
"low"

android:layout_centerHorizontal
=
"true
"

android:layout_below
=
"@id/mid"

/
>

<
TextView

android:id
=
"@+id/left"

android:layout_height
=
"
wrap_content
"

android:text
=
"left"

android:layout_width
=
"
wrap_content
"

android:layout_above
=
"@+id/mid"

android:layout_toLeftOf
=
"@+id/mid"

/
>
</
RelativeLayout
>


AbsoluteLayout



<
AbsoluteLayout

xmlns:android
=


"http://schemas.android.com/apk/res/android"


android:layout_width
="
fill_parent
"


android:layout_height
="
fill_parent
"


>



<
TextView


android:layout_width
="
wrap_content
"


android:layout_height
="
wrap_content
"


android:text
="Element One"


/>


<
TextView


android:layout_width
="
wrap_content
"


android:layout_height
="
wrap_content
"


android:text
="Element Two"


android:layout_x
="
30
px"


android:layout_y
="
30
px"


/>


<
TextView


android:layout_width
="
wrap_content
"


android:layout_height
="
wrap_content
"


android:text
="Element Three"


android:layout_x
="
50
px"


android:layout_y
="
50
px"


/>


</
AbsoluteLayout
>

TableLayout



<
TableLayout

xmlns:android
=


"http://schemas.android.com/apk/res/android"


android:layout_width
="
fill_parent
"


android:layout_height
="
fill_parent
">


<
TableRow
>


<
TextView


android:layout_width
="
wrap_content
"


android:layout_height
="
wrap_content
"


android:text
="Element One A"


/>


<
TextView


android:layout_width
="
wrap_content
"


android:layout_height
="
wrap_content
"


android:text
="Element One B"


/>


</
TableRow
>


<
TableRow
>


<
TextView


android:layout_width
="
wrap_content
"


android:layout_height
="
wrap_content
"


android:text
="Element Two A"


/>


<
TextView


android:layout_width
="
wrap_content
"


android:layout_height
="
wrap_content
"


android:text
="Element Two B"


/>


</
TableRow
>


</
TableLayout
>


Create View by code


public class TestLab
1
_
3
Activity extends Activity {


@Override



public void
onCreate
(Bundle
savedInstanceState
) {



super.onCreate
(
savedInstanceState
);



setContentView
(
createView
());



}



private View
createView
()



{

final Context
context

= TestLab
1
_
3
Activity.this;



LinearLayout

panel =
new
LinearLayout
(context);



panel.setLayoutParams
(
new
LayoutParams
(
LayoutParams.
FILL_PARENT,LayoutParams.WRAP_CONTENT
));



panel.setOrientation
(
LinearLayout.
HORIZONTAL
);



Button but
1
=
new Button(this);

but
1
.setText("
1111
"); but
1
.setId(
33
);



but
1
.setLayoutParams(
new
LayoutParams
(
LayoutParams.
WRAP_CONTENT
,
LayoutParams.FILL_PARENT
));



panel.addView
(but
1
);



Button but
2
=
new Button(this);



but
2
.setText("
2222
"); but
2
.setId(
44
);



but
2
.setLayoutParams(
new
LayoutParams
(
LayoutParams.
WRAP_CONTENT
,
LayoutParams.WRAP_CONTENT
));



panel.addView
(but
2
);



return panel;



} }

Canvas


เป็นพื้นที่ส าหรับการเขียน
graphic


สร้างจากสืบทอด

view class


ท าการเขียน

Code

onDraw
( ) method

Canvas


public class Graphics extends Activity {


@Override


public void
onCreate
(Bundle
savedInstanceState
) {


super.onCreate
(
savedInstanceState
);


setContentView
(new
GraphicsView
(
getApplicationContext
()));


}


static public class
GraphicsView

extends View {


public
GraphicsView
(Context
context
) {


super(context);


}


@Override


protected void
onDraw
(Canvas
canvas
) {


Paint p = new Paint();


p.setColor
(
Color.
WHITE
);


canvas.drawText
("
Yo
!",
0
,
25
, p);}


}

View


public class MyView
1
extends View{


Bitmap icon=
null;


Bitmap icon
1
=
null;


Context
ctx
;


Paint
lPaint

=
new Paint();


int

x_
1
=
0
,y_
1
=
0
;


MediaPlayer

player =
null;


boolean

running = true;


public MyView
1
(Context
context
) {


super(context);


icon=
BitmapFactory.
decodeResource
(
getResources
(),
R.drawable.icon
);


}


final public void
setX_Y
(
int

x,int

y)


{



this.x_
1
=x;



this.y_
1
=y;



invalidate();


}

protected void
onDraw
(Canvas
canvas
) {

//Draw the white background

Rect

rct

=
new
Rect
();

rct.set
(
0
,
0
,canvas.getWidth(),
canvas.getHeight
());

Paint
pnt

=
new Paint();

pnt.setStyle
(
Paint.Style.
FILL
);

pnt.setColor
(
Color.
WHITE
);

canvas.drawRect
(
rct
,
pnt
);

canvas.drawBitmap
(icon, x_
1
, y_
1
,lPaint);

//
drawSprint
(x_
1
, y_
1
, canvas);

}

}


public class TestLab
1
_
5
Activity extends Activity implements
OnTouchListener
{


MyView
1
v
1
=
null;


int

x=
0
,y=
0
;


@Override



public void
onCreate
(Bundle
savedInstanceState
) {



super.onCreate
(
savedInstanceState
);


v
1
=
new MyView
1
(
getApplicationContext
());



setContentView
(v
1
);



v
1
.setOnTouchListener(
this);


}


@Override


public
boolean

onTouch
(View v,
MotionEvent

event) {


//
TODO Auto
-
generated method stub


//event.


v
1
.setX_Y((
int
)
event.getX
(),(
int
)
event.getY
());


return true;


}


}


public class
MyBitMap

{


int

x,y
;


Bitmap b;


public
MyBitMap
(Bitmap
b,int

x,int

y)


{


this.x
=x;


this.y
=y;


this.b
=b;


}


public
boolean

checkInBound
(
int

x,int

y)


{


if((x>=
this.x

&& x<=
this.x+b.getWidth
()) && (y>=
this.y

&& y<=
this.y+b.getHeight
()))


{


return true;


}


return false;


}



}

public
int

getX
() {

return x;

}

public void
setX
(
int

x) {

this.x

= x;

}

public
int

getY
() {

return y;

}

public void
setY
(
int

y) {

this.y

= y;

}

public Bitmap
getB
() {

return b;

}

public void
setB
(Bitmap b) {

this.b

= b;

}

}



public class MyView
2
extends View{


ArrayList
<
MyBitMap
>
ar
=
new
ArrayList
<
MyBitMap
>();


Bitmap icon=
null;


Context
ctx
;


Paint
lPaint

=
new Paint();


int

x_
1
=
0
,y_
1
=
0
;


MediaPlayer

player =
null;


boolean

running = true;


public MyView
2
(Context
context
) {


super(context);


icon=
BitmapFactory.
decodeResource
(
getResources
(),
R.drawable.icon
);


}


public void
setX_Y
(
int

x,int

y)


{



ar.add
(
new
MyBitMap
(icon, x, y));



invalidate();


}




}

protected void
onDraw
(Canvas
canvas
) {

//Draw the white background

Rect

rct

=
new
Rect
();

rct.set
(
0
,
0
,canvas.getWidth(),
canvas.getHeight
());

Paint
pnt

=
new Paint();

pnt.setStyle
(
Paint.Style.
FILL
);

pnt.setColor
(
Color.
WHITE
);

canvas.drawRect
(
rct
,
pnt
);

for(
int

i
=
0
;i<
ar.size
();
i
++){


MyBitMap

b=
ar.get
(
i
);

canvas.drawBitmap
(
b.getB
(),
b.getX
(),
b.getY
(),
lPaint
);

}

}

animation loop


public class MyView
4
extends View{


Bitmap ball=
null;


Context
ctx
;


Paint
lPaint

=
new Paint();


int

x_
1
=
0
,y_
1
=
0
;


MediaPlayer

player =
null;


boolean

running = true;


public MyView
4
(Context
context
) {


super(context);


ball=
BitmapFactory.
decodeResource
(
getResources
(),
R.drawable.icon
);


//this.


}


final public void
setX_Y
(
int

x,int

y)


{



this.x_
1
=x;



this.y_
1
=y;



invalidate();


}



}


protected void
onDraw
(Canvas
canvas
) {


Rect

rct

=
new
Rect
();


rct.set
(
0
,
0
,canvas.getWidth(),
canvas.getHeight
());


Paint
pnt

=
new Paint();


pnt.setStyle
(
Paint.Style.
FILL
);


pnt.setColor
(
Color.
WHITE
);


canvas.drawRect
(
rct
,
pnt
);


//Increment the X and Y value for the
sprites


x_
1
+=
2
;


y_
1
+=
2
;


//Reset the loop when the balls drift
offscreen
.


if(x_
1
>=
canvas.getWidth
())


{


x_
1
=
0
;


y_
1
=
0
;


}


canvas.drawBitmap
(ball, x_
1
, y_
1
,
lPaint
);


if(running)


invalidate();


try {


Thread.
sleep
(
500
);


}
catch (
InterruptedException

e) {


e.printStackTrace
();


}


}


}