user interface layout trong android

http://vietjack.com/android/index.jsp                                                                                                              Copyright  ©  vietjack.com     UI Layout Android Khối kiến trúc tảng cho giao diện UI đối tượng View tạo từ lớp View chiếm khu vực hình chữ nhật hình chịu trách nhiệm để vẽ xử lý kiện View lớp sở cho Widget, mà sử dụng để tạo thành phần UI có tính tương tác button, trường text, … ViewGroup lớp View cung cấp Container vơ hình mà giữ View khác ViewGroup khác định nghĩa thuộc tính Layout chúng Tại tầng thứ ba, có nhiều Layout khác mà lớp phụ lớp ViewGroup Layout đặc trưng định nghĩa cấu trúc nhìn thấy cho giao diện UI Android tạo runtime sử dụng đối tượng View/ViewGroup bạn khai báo Layout bạn sử dụng XML file đơn giản main_Layoutxml, đặt thư mục res/layout Project http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí  Page  1   http://vietjack.com/android/index.jsp                                                                                                              Copyright  ©  vietjack.com     LAYOUT PARAMS Chương hướng dẫn chi tiết cách tạo GUI bạn dựa Layout định nghĩa bên XML file Một Layout chứa kiểu Widget Button, Label, Textbox, … Dưới ví dụ đơn giản XML file có LinearLayout: Khi Layout bạn tạo, bạn tải layout resource từ phần code ứng dụng, triển khai phương thức callback bạn Activity.onCreate(), sau: − public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } Các loại Layout Android Android cung cấp số Layout để bạn sử dụng hầu hết ứng dụng Android để cung cấp nhìn cảm nhận khác nhau: Stt Layout & Miêu tả Linear Layout LinearLayout view group mà chỉnh view theo hướng đó: chiều dọc hay chiều ngang Relative Layout RelativeLayout view group mà hiển thị view vị trí cân xứng với http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí  Page  1   http://vietjack.com/android/index.jsp                                                                                                              Copyright  ©  vietjack.com     Table Layout TableLayout view mà nhóm tất view vào hàng cột Absolute Layout AbsoluteLayout cho phép bạn xác định vị trí xác view Frame Layout FrameLayout placeholder hình mà bạn sử dụng để hiển thị view đơn List View ListView view group mà hiển thị danh sách item scroll Grid View GridView view group mà hiển thị item lưới hai chiều scroll Các thuộc tính Layout Android Mỗi Layout có tập hợp thuộc tính mà định nghĩa thuộc tính mang tính thị giác cho Layout Có số thuộc tính chúng cho tất Layout có số thuộc tính riêng cho Layout cụ thể Dưới số thuộc tính chung áp dụng cho tất Layout: Attribute Miêu tả android:id Đây ID mà nhận diện View android:layout_width Đây độ rộng Layout http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí  Page  1   http://vietjack.com/android/index.jsp                                                                                                              Copyright  ©  vietjack.com     android:layout_height Đây chiều cao Layout android:layout_marginTop Đây không gian phụ (extra space) cạnh Layout android:layout_marginBottom Đây extra space cạnh Layout android:layout_marginLeft Đây extra space cạnh trái Layout android:layout_marginRight Đây extra space cạnh phải Layout android:layout_gravity Xác định cách view đặt đâu android:layout_weight Xác định có extra space Layout nên cấp phát tới View android:layout_x Xác định tọa độ x Layout android:layout_y Xác định tọa độ y Layout android:layout_width Đây độ rộng Layout android:layout_width Đây chiều cao Layout android:paddingLeft Đây left padding điền cho Layout android:paddingRight Đây right padding điền cho Layout android:paddingTop Đây top padding điền cho Layout android:paddingBottom Đây bottom padding điền cho Layout http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí  Page  1   http://vietjack.com/android/index.jsp                                                                                                              Copyright  ©  vietjack.com     Ở đây, width height kích cỡ Layout/View mà xác định theo dp (Density-independent pixel), sp (Scale-independent pixel), pt (các point 1/72 inch), px (pixel), mm (mili met), in (inch) Bạn xác định width height với ước lượng xác, thường xuyên hơn, bạn sử dụng sau để thiết lập width height: − • android:layout_width=wrap_content Nói cho view bạn tự xếp kích cỡ u cầu nội dung • android:layout_width=fill_parent Nói cho view bạn trở nên lớn view cha Thuộc tính gravity đóng vai trò quan trọng việc đặt vị trí cho đối tượng view nhận nhiều (được phân biệt |) giá trị sau: Constant Value Miêu tả top 0x30 Đẩy đối tượng lên container, khơng thay đổi kích cỡ bottom 0x50 Đẩy đối tượng xuống container, khơng thay đổi kích cỡ left 0x03 Đẩy đối tượng sang bên trái container, không thay đổi kích cỡ right 0x05 Đẩy đối tượng sang bên phải container, khơng thay đổi kích cỡ center_vertical 0x10 Đặt đối tượng vào theo chiều dọc container, khơng thay đổi kích cỡ fill_vertical 0x70 Tăng kích cỡ theo chiều dọc đối tượng cần để điền đầy container http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí  Page  1   http://vietjack.com/android/index.jsp                                                                                                              Copyright  ©  vietjack.com     center_horizontal 0x01 Đặt đối tượng vào theo chiều ngang container, khơng thay đổi kích cỡ fill_horizontal 0x07 Tăng kích cỡ theo chiều ngang đối tượng cần để điền đầy container center 0x11 Đặt đối tượng vào container theo chiều ngang dọc, khơng thay đổi kích cỡ fill 0x77 Tăng kích cỡ theo chiều ngang dọc đối tượng cần để điền đầy container clip_vertical 0x80 Tùy chọn bổ sung mà thiết lập để có cạnh và/hoặc view cắt theo giới hạn container Việc cắt dựa vertical gravity: top gravity cắt cạnh dưới, bottom gravity cắt cạnh trên, không cắt hai cạnh clip_horizontal 0x08 Tùy chọn bổ sung mà thiết lập để có cạnh trái và/hoặc phải view cắt theo giới hạn container Việc cắt dựa horizontal gravity: left gravity cắt cạnh phải, right gravity cắt cạnh trái, không cắt hai cạnh start 0x00800003 Đẩy đối tượng tới phần đầu container, khơng thay đổi kích cỡ end 0x00800005 Đẩy đối tượng tới phần cuối container, không thay đổi kích cỡ View ID Android Một đối tượng View có ID gán tới nó, mà nhận diện View cách bên cấu trúc Cú pháp cho ID, bên thẻ XML là: − android:id="@+id/my_button" Sau miêu tả ngắn gọn ký hiệu @ +: − http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí  Page  1   http://vietjack.com/android/index.jsp                                                                                                              Copyright â vietjack.com Biu tng @ ti phần đầu chuỗi XML Parser nên phân tích cú pháp mở rộng phần lại chuỗi ID nhận diện ID resource • Biểu tượng + nghĩa tên resource mà phải tạo thêm tới Resource Để tạo thể đối tượng View bắt từ Layout, sử dụng cú pháp sau: − Button myButton = (Button) findViewById(R.id.my_button);   http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí  Page  1   ... tới View android :layout_ x Xác định tọa độ x Layout android :layout_ y Xác định tọa độ y Layout android :layout_ width Đây độ rộng Layout android :layout_ width Đây chiều cao Layout android: paddingLeft... cao Layout android :layout_ marginTop Đây không gian phụ (extra space) cạnh Layout android :layout_ marginBottom Đây extra space cạnh Layout android :layout_ marginLeft Đây extra space cạnh trái Layout. .. xmlns :android= "http://schemas .android. com/apk/res /android" android :layout_ width="fill_parent" android :layout_ height="fill_parent" android: orientation="vertical" >