Feature news

Hiển thị các bài đăng có nhãn Tin tức về android. Hiển thị tất cả bài đăng

Style và Theme trong Android

Định nghĩa Style trong Android

Một Style được định nghĩa trong một XML resource mà là riêng rẽ với XML mà xác định layout. XML file này ở dưới thư mục res/values/ của project và sẽ có<resources>như là root node mà là bắt buộc cho style file. Tên của XML file là tùy ý, nhưng nó phải sử dụng đuôi .xml.
Người lap trinh android có thể định nghĩa nhiều Style mỗi file bởi sử dụng thẻ<style> nhưng mỗi Style sẽ có tên của nó mà nhận diện duy nhất style đó. Các thuộc tính style trong Android được thiết lập bởi sử dụng thẻ<item> như sau :

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomFontStyle">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:capitalize">characters</item>
<item name="android:typeface">monospace</item>
<item name="android:textSize">12pt</item>
<item name="android:textColor">#00FF00</item>/>
</style>
</resources>

Giá trị cho <item> có thể là một chuỗi từ khóa, một giá trị màu thập lục phân, một tham chiếu tới kiểu resource khác, hoặc giá trị khác phụ thuộc vào thuộc tính style.

Sử dụng Style trong Android

Khi Style của bạn được định nghĩa, bạn có thể sử dụng nó trong XML layout file bởi sử dụng thuộc tính style như sau:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:id="@+id/text_id" style="@style/CustomFontStyle" android:text="@string/hello_world" /> </LinearLayout>

Tính kế thừa Style trong Android

Android hỗ trợ tính kế thừa style theo cách tương tự như CSS trong thiết kế Web. Bạn có thể sử dụng các thuộc tính kế thừa từ một style đang tồn tại và sau đó chỉ định nghĩa các thuộc tính mà bạn muốn thay đổi hoặc thêm vào.Để triển khai một Custom Theme, bạn tạo hoặc chỉnh sửa MyAndroidApp/res/values/themes.xml, như sau:
<resources>
  ...
  <style name="MyCustomTheme" parent="android:style/Theme">
  <item name="android:textColorPrimary">#ffff0000</item>
  </style>
  ...
</resources>

Trong AndroidManifest.xml của bạn, áp dụng Theme tới các Activity mà bạn muốn:



<activity   android:name="com.myapp.MyActivity"   ...   android:theme="@style/MyCustomTheme"   />

Theme mới sẽ được áp dụng tới Activity của bạn, và text bây giờ là màu đỏ sáng.



image



Áp dụng màu cho các thuộc tính Theme



Color resource của bạn có thể được áp dụng tới một số thuộc tính theme, như background và text color ban đầu, bằng việc thêm các phần tử tới Custom Theme của bạn. Các thuộc tính này được định nghĩa trong styles.xml file. Ví dụ, để áp dụng custom color tới background, bạn thêm hai phần tử tới custom theme, được định nghĩa trong MyAndroidApp/res/values/styles.xml file như sau:





<resources>
   ...
   <style name="MyCustomTheme" ...>
      <item name="android:windowBackground">@color/my_custom_color</item>
      <item name="android:colorBackgroundCacheHint">@color/my_custom_color</item>
   </style>
   ...
</resources>


image







Sử dụng một Custom Nine-Patch với Button



Nine-Patch drawable là một loại hình ảnh đặc biệt mà có thể được cân đối tỉ lệ với độ rộng và chiều cao trong khi duy trì tính toàn vẹn trực giác của nó. Nine-Patch là cách thức phổ biến nhất để xác định bề ngoài của button trong Android, mặc dù cũng có thể sử dụng bất cứ kiểu drawable nào.





VÍ DỤ NINE-PATCH BUTTON



Các bước để tạo Nine-Patch Button


Lưu bitmap này dạng /res/drawable/my_nine_patch.9.pngĐịnh nghĩa một style mớiÁp dụng button style mới tới thuộc tính buttonStyle của Custom Theme.




ĐỊNH NGHĨA STYLE MỚI





<resources>
   ...
      <style name="MyCustomButton" parent="android:Widget.Button">
      <item name="android:background">@drawable/my_nine_patch</item>
      </style>
   ...
</resources>





ÁP DỤNG THEME



<resources>
   ...
      <style name="MyCustomTheme" parent=...>
         ...
         <item name="android:buttonStyle">@style/MyCustomButton</item>
      </style>
   ...
</resources>



Theme trong Android

Hy vọng bạn đã hiểu khái niệm về Style, và bây giờ chúng ta cùng tìm hiểu xemTheme là gì. Một Theme là không gì khác ngoài một Style được áp dụng cho cả một Activity hoặc cả một ứng dụng, thay vì chỉ áp dụng cho một View đơn.



Vì thế, khi Style được áp dụng như là một Theme, mỗi View trong Activity hoặc ứng dụng sẽ áp dụng mỗi thuộc tính style mà nó hỗ trợ. Ví dụ, bạn có thể áp dụng cùng style làCustomFontStyle như là một Theme cho một Activity và sau đó tất cả text bên trong Activity đó sẽ có cùng font đơn cách và màu xanh lá cây.



Để thiết lập một Theme cho tất cả Activity của ứng dụng, mở AndroidManifest.xmlfile và sửa đổi thẻ <application> để bao thuộc tính android:theme với tên style đó. Ví dụ:



<application android:theme="@style/CustomFontStyle">



Nhưng nếu bạn muốn một Theme được áp dụng chỉ cho một Activity trong ứng dụng, thì bạn thêm thuộc tính android:theme chỉ cho thẻ <activity>



Ví dụ



<activity android:theme="@style/CustomFontStyle">



Android định nghĩa một số Theme mặc định để bạn có thể sử dụng trực tiếp hoặc kế thừa chúng bởi sử dụng thuộc tính parent, như sau:



<style name="CustomTheme" parent="android:Theme.Light">
   ...
</style>



Tạo bảng màu trong Android



Thiết kế layout có thể được triển khai dựa trên Theme dựa trên các màu. Ví dụ như thiết kế sau dựa trên màu Theme (màu xanh da trời)









Đọc tiếp »










Custom Component trong Android




Android cung cấp các widget đã xây dựng sẵn như Button, TextView, EditText, ListView, CheckBox, RadioButton, Gallery, Spinner, AutoCompleteTextView … để bạn có thể sử dụng trực tiếp trong ứng dụng Android. Nhưng có một tình huống là khi bạn không thấy hài lòng với các tính năng đang tồn tại của bất cứ widget có sẵn nào, thì Android cung cấp cho bạn các phương thức để tạo riêng cho bạn các Custom Component (Custom Component) để người lập trình android có thể tùy chỉnh cho phù hợp với yêu cầu của bạn.

Nếu bạn chỉ cần tạo các điều chỉnh nhỏ tới widget hoặc layout đang tồn tại, thì bạn có thể sử dụng lớp con của widget hoặc layout đó và ghi đè các phương thức của chúng.

Chương này giải thích cho bạn cách tạo Custom View và sử dụng chúng trong ứng dụng theo các bước đơn giản.











Tạo một Custom Component đơn giản

Tạo attribute file với tên attrs.xml trong thư mục res/values.






<?xml version="1.0" encoding="utf-8"?>
<resources>
   <declare-styleable name="Options">
      <attr name="titleText" format="string" localization="suggested" />
      <attr name="valueColor" format="color" />
   </declare-styleable>
</resources>

Thay đổi layout file được sử dụng bởi Activity thành như sau.






<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:custom="http://schemas.android.com/apk/res/com.vogella.android.view.compoundview"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:showDividers="middle"
   android:divider="?android:attr/listDivider"
   tools:context=".MainActivity" >
   
   <com.vogella.android.view.compoundview.ColorOptionsView
      android:id="@+id/view1"
      android:layout_width="match_parent"
      android:layout_height="?android:attr/listPreferredItemHeight"
      android:background="?android:selectableItemBackground"
      android:onClick="onClicked"
      custom:titleText="Background color"
      custom:valueColor="@android:color/holo_green_light"/>

   <com.vogella.android.view.compoundview.ColorOptionsView
      android:id="@+id/view2"
      android:layout_width="match_parent"
      android:layout_height="?android:attr/listPreferredItemHeight"
      android:background="?android:selectableItemBackground"
      android:onClick="onClicked"
      custom:titleText="Foreground color"
      custom:valueColor="@android:color/holo_orange_dark"/>

</LinearLayout>

Tạo java file với tên ColorOptionsView .






package com.vogella.android.customview.compoundview;

import com.vogella.android.view.compoundview.R;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class ColorOptionsView extends LinearLayout {
   private View mValue;
   private ImageView mImage;
   
   public ColorOptionsView(Context context, AttributeSet attrs) {
      super(context, attrs);
      
      TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.ColorOptionsView, 0, 0);
      String titleText = a.getString(R.styleable.ColorOptionsView_titleText);
      
      int valueColor = a.getColor(R.styleable.ColorOptionsView_valueColor,android.R.color.holo_blue_light);
      a.recycle();
      
      setOrientation(LinearLayout.HORIZONTAL);
      setGravity(Gravity.CENTER_VERTICAL);
      
      LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
      inflater.inflate(R.layout.view_color_options, this, true);
      TextView title = (TextView) getChildAt(0);
      title.setText(titleText);
      
      mValue = getChildAt(1);
      mValue.setBackgroundColor(valueColor);
      mImage = (ImageView) getChildAt(2);
   }
   
   public ColorOptionsView(Context context) {
      this(context, null);
   }
   
   public void setValueColor(int color) {
      mValue.setBackgroundColor(color);
   }
   
   public void setImageVisible(boolean visible) {
      mImage.setVisibility(visible ? View.VISIBLE : View.GONE);
   }
} 

Sửa đổi Main activity và sau đó chạy ứng dụng.






package com.vogella.android.customview.compoundview;

import com.vogella.android.view.compoundview.R;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
   }
   
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to the action bar if it is present.
      getMenuInflater().inflate(R.menu.activity_main, menu);
      return true;
   }
   
   public void onClicked(View view) {
      String text = view.getId() == R.id.view1 ? "Background" : "Foreground";
      Toast.makeText(this, text, Toast.LENGTH_SHORT).show();
   }
} 

Ứng dụng đang chạy sẽ trông như sau:







Thuyết minh bởi sử dụng code bên trong lớp Activity



Tương tự như cách khởi tạo Custom Component, cách mà bạn khởi tạo widget đã xây dựng sẵn trong lớp Activity của bạn. Ví dụ, bạn có thể sử dụng code sau để khởi tạo Custom Component đã được định nghĩa ở trên.


@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
   
   DateView dateView = new DateView(this);
   setContentView(dateView);
}



Bạn theo dõi kỹ ví dụ trên để hiểu cách Thuyết minh một Custom Component bởi sử dụng code bên trong một Activity.











Thuyết minh bởi sử dụng Layout XML file

Theo cách truyền thống, bạn sử dụng Layout XML file để khởi tạo các widget xây dựng sẵn của bạn, và cách tương tự cũng sẽ áp dụng trên các custom widget để bạn có thể khởi tạo các Custom Component của mình bởi sử dụng Layout XML file như giải thích ở trên. Ở đây, com.example.compoundview là package mà bạn đã đặt tất cả code liên quan tới lớp DateView và DateView là một tên lớp Java mà bạn đặt toàn bộ Custom Component của mình ở trong đó.






<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:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context=".MainActivity" >
   
   <com.example.compoundview.DateView
      android:layout_width="match_parent"
      android:layout_height="wrap_content" 
      android:textColor="#fff"
      android:textSize="40sp"
      android:background="#000"/>
</RelativeLayout>

Ở đây, điều quan trọng để ghi nhớ là chúng ta đang sử dụng tất cả thuộc tính TextView cùng với Custom Component mà không có bất cứ thay đổi nào. Tương tự, bạn có thể sử dụng tất cả sự kiện và phương thức cùng với thành phần DateView đó.



Custom Component với Custom Attribute trong Android

Chúng ta đã thấy cách chúng ta kế thừa tính năng của các widget xây dựng sẵn, nhưng trong cả hai ví dụ đã cho ở trên, chúng ta thấy rằng các Custom Component có thể sử dụng tất cả thuộc tính mặc định của lớp cha. Nhưng giả sử khi bạn muốn tạo riêng thuộc tính cho mình, thì ví dụ dưới đây là thủ tục đơn giản để tạo và sử dụng thuộc tính mới cho các Custom Component trong Android. Sau đây, chúng ta sẽ giới thiệu ba thuộc tính và sử dụng chúng như sau:






<com.example.compoundview.DateView
   android:layout_width="match_parent"
   android:layout_height="wrap_content" 
   android:textColor="#fff"
   android:textSize="40sp"
   custom:delimiter="-"
   custom:fancyText="true"/>



Bước 1

Bước này cho phép chúng ta sử dụng các thuộc tính tùy biến để định nghĩa chúng trong một xml file mới dưới res/values/ và gọi nó là attrs.xml. Bạn theo dõi ví dụ về attrs.xml sau:






<?xml version="1.0" encoding="utf-8"?>
<resources>
   <declare-styleable name="DateView">
   <attr name="delimiter" format="string"/>
   <attr name="fancyText" format="boolean"/>
   </declare-styleable>
</resources>

Ở đây, name=value là những gì chúng ta muốn sử dụng trong Layout XML file như là thuộc tính, và format=type là kiểu thuộc tính.



Bước 2

Bước này sẽ đọc các thuộc tính này từ Layout XML file và thiết lập chúng cho thành phần. Trình tự logic này tiếp tục cho các Constructor mà đã được truyền một AttributeSet, khi đó là nơi chứa các thuộc tính XML. Để đọc các giá trị trong XML, đầu tiên bạn tạo một TypedArray từ AttributeSet, sau đó sử dụng nó để đọc và thiết lập các giá trị như sau:






TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DateView);

final int N = a.getIndexCount();
for (int i = 0; i < N; ++i)
{
   int attr = a.getIndex(i);
   switch (attr)
   {
      case R.styleable.DateView_delimiter:
      String delimiter = a.getString(attr);
      
      //...do something with delimiter...
      break;
      
      case R.styleable.DateView_fancyText:
      boolean fancyText = a.getBoolean(attr, false);
      
      //...do something with fancyText...
      break;
   }
}
a.recycle();



Bước 3

Cuối cùng, bạn có thể sử dụng các thuộc tính đã định nghĩa của mình trong Layout XML file, như sau:






<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:custom="http://schemas.android.com/apk/res/com.example.compoundview"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context=".MainActivity" >
   
   <com.example.compoundview.DateView
      android:layout_width="match_parent"
      android:layout_height="wrap_content" 
      android:textColor="#fff"
      android:textSize="40sp"
      custom:delimiter="-"
      custom:fancyText="true"/>

</RelativeLayout>

Phần quan trọng là:xmlns:custom="http://schemas.android.com/apk/res/com.example.compoundview". Ghi nhớ rằng http://schemas.android.com/apk/res/ sẽ vẫn duy trì như cũ, nhưng phần cuối cùng sẽ được thiết lập thành tên package và từ đó bạn có thể sử dụng bất cứ thứ gì đằng sau xmlns:. Trong ví dụ này, mình đã sử dụng custom, nhưng bạn có thể sử dụng bất cứ tên nào bạn thích.



Đọc tiếp »















Đăng ký:
Bài đăng (Atom)











Thiết kế logo, 


Thiết kế bộ nhận diện thương hiệu, 


Học android, 


lớp học java




Back to Top