четверг, 15 ноября 2012 г.

Создание Custom Dialog (часть 3. Внешний вид Custom Dialog)


Теперь изменим внешний вид диалога, добавим кнопки и поля для ввода
Для этого создадим в папке res/layout  файл main_dialog.xml.


В файле пропишем 


//main_dialog.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    

    <LinearLayout
        android:id="@+id/lv_dialog_parametr"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        
        <TextView 
            android:id="@+id/text_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:text="@string/text"/>
        
        <EditText
            android:id="@+id/edit"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="25dp"
            android:ems="10"
            android:inputType="number"/>               
    </LinearLayout>
    
    
    <RelativeLayout 
        android:id="@+id/RL_Buttons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="15dp"
        android:padding="5dp"
         >
              
        <TextView 
            android:id="@+id/text_confirm_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="10dp"
            android:text="@string/text_confirm"
            />
        
        <Button 
            android:id="@+id/button_confirm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/text_confirm_id"
            android:layout_marginLeft="100dp"
            android:text="@string/text_button_confirm"
            />              
    </RelativeLayout>
  
  
    <LinearLayout
        android:id="@+id/Ll_buttons"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_gravity="center"
        android:layout_marginTop="15dp"
        android:padding="5dp"
        android:orientation="horizontal" >
         
         <Button 
            android:id="@+id/button_OK"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/text_button_OK"
            />
      
       
          <Button 
            android:id="@+id/button_Cancel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/text_button_Cancel"
            />
        
       
         
    </LinearLayout>
    
  
</LinearLayout>






В данном файле создали элементы для диалога и их расположение.

В файл strings.xml  добавим значения переменных для Button и TextView
<string name="text_button_OK">OK</string>
<string name="text_button_Cancel">Cancel</string>
<string name="text">Введите число</string>
<string name="text_confirm">Подтвердить</string>
<string name="text_button_confirm">OK</string>



Получим такой результат







Попробуем улучшить внешний вид, создав градиент на фоне нижних кнопок.

Создадим файл gradient_box.xml

//gradient_box.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFFFFFFF"
        android:endColor="#00000000"
        android:angle="270"/>
    <padding android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp" />
    <corners android:radius="0dp" />
</shape>


Положим его в папку  res\drawable. Если ее нет, то создадим.
В файле main_dialog.xml в LinearLayout с id Ll_buttons добавляем
android:background="@drawable/gradient_box"

Результатом будет такой диалог






Видео с данным уроком













Комментариев нет:

Отправить комментарий