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

Создание Custom Dialog (часть 4. Spinner)

Добавим спиннер в диалог
В файл main_dialog.xml добавим разметку спиннера в RelativeLayout

< Spinner
                android:id="@+id/spinner"
                android:layout_below="@+id/button_confirm"
                android:layout_marginTop="10dp"
                android:layout_alignRight="@+id/button_confirm"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                
                 />      


Получим такой диалог





Теперь сделаем обработку элементов в диалоге

В MainActivity прописываем
final AlertDialog al;

//Моделирование окна диалога
AlertDialog.Builder  AlE = new AlertDialog.Builder(this);
AlE.setTitle("Диалог");

//Находим файл с описание вида диалога
LinearLayout view = (LinearLayout)getLayoutInflater().inflate(R.layout.main_dialog, null);             

//Устанавливаем диалогу внешний вид
AlE.setView(view);

//Находим компонеты диалогового окна
EditText edit =(EditText)view.findViewById(R.id.edit);
Button b_confirm = (Button)view.findViewById(R.id.button_confirm);
TextView t_confirm_id =(TextView)view.findViewById(R.id.text_confirm_id);
      
Spinner spinner = (Spinner)view.findViewById(R.id.spinner);
      
Button b_OK = (Button)view.findViewById(R.id.button_OK);
Button b_Cancel = (Button)view.findViewById(R.id.button_Cancel)

al=AlE.create();
           
//---СПИННЕР-------------
      
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, order);
      adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(adapter);
      
//начальная позиция
spinner.setSelection(1);
      
 //---спиннер-------------






simple_spinner_item и  simple_spinner_dropdown_itemэто встроенные xml файлы ,
для разметки внешнего вида спиннера по умолчанию

order это массив данных, который отображается в спиннере.
Прописываем его вместе с объявлениями переменных
public String order[]={"A","B","C"};

 Начальная позиция спиннера утанавливается с помощью метода setSelection()

Начальная позиция







Видео с уроком




Теперь MainActivity выглядит так
package my.ambar.dialog;


import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.AlertDialog.Builder;
import android.app.Dialog;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.Spinner;
import android.widget.TextView;


public class MainActivity extends Activity {
 
public String order[]={"A","B","C"};

protected static final int CUSTOM_DIALOG = 0;
protected static final int OTHER_DIALOG = 1;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
   
final Button b_dialog = (Button)findViewById(R.id.b_custom_dialog_id);
final Button b_dialog2 = (Button)findViewById(R.id.b_custom_dialog2_id);
     
b_dialog.setOnClickListener(new View.OnClickListener() {
  
public void onClick(View v) {
     
showDialog(CUSTOM_DIALOG);
   
//b_dialog.setText("Clicked");
        
  }
 });
     
b_dialog2.setOnClickListener(new View.OnClickListener() {
   
public void onClick(View v) {
      
 showDialog(OTHER_DIALOG);
    
  }
  });
    
    
    }
        
//---СОЗДАЕМ ДИАЛОГ-------------------------------
 
protected Dialog onCreateDialog(int id) {
Dialog dialog = null;
switch (id) {
case CUSTOM_DIALOG :
   
final AlertDialog al;
AlertDialog.Builder AlE = new AlertDialog.Builder(this);
AlE.setTitle("Диалог");
   
LinearLayout view = (LinearLayout)getLayoutInflater().inflate(R.layout.main_dialog,null);
AlE.setView(view);

EditText edit =(EditText)view.findViewById(R.id.edit);
Button b_confirm = (Button)view.findViewById(R.id.button_confirm);
TextView t_confirm_id =(TextView)view.findViewById(R.id.text_confirm_id);
      
Spinner spinner = (Spinner)view.findViewById(R.id.spinner);
      
Button b_OK = (Button)view.findViewById(R.id.button_OK);
Button b_Cancel = (Button)view.findViewById(R.id.button_Cancel);
      
      
//---СПИННЕР-------------
      
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, order);
      adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(adapter);

//начальная позиция
spinner.setSelection(1);
      
//---спиннер-------------
      
     
     
al=AlE.create(); 
al.show();
break;
         
case OTHER_DIALOG :
final AlertDialog al_other;
AlertDialog.Builder Al_O = new AlertDialog.Builder(this);
Al_O.setTitle("Второй Диалог");
   
al_other=Al_O.create();
al_other.show();
break;
   
 }
return dialog;
}
 
 
//---создаем диалог-------------------------------
 
 
 
}









Создание 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"

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






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













Создание Custom Dialog (часть 2. Создание Custom_Dialog)

В этой части урока будем создавать диалоговое окно.


Т.к. мы будем открывать диалоговое окно,то вместо изменения надписи на Button  прописываем

showDialog(CUSTOM_DIALOG) ;


где CUSTOM_DIALOG константа
static final int CUSTOM_DIALOG=1;


2.Создаем диалог
Так же в MainActivity допишем следующий код для создания простого диалога.
@Override
protected Dialog onCreateDialog(int id) {
      Dialog dialog = null;
     
      switch (id) {
      case CUSTOM_DIALOG :
   
            final AlertDialog al;
            //Моделирование окна диалога
            AlertDialog.Builder  AlE = new AlertDialog.Builder(this);
            AlE.setTitle("Диалог");
       
            al=AlE.create();    
            al.show();
            break;     }


      return dialog;
     
 }


Получаем диалог, только с одним заголовком.






















С помощью switch можно выбрать различную форму диалога.
Например из другого места  необходимо вызвать диалог но с другим видом то,
делается это так:

В месте вызова пишем
showDialog(OTHER_DIALOG) ;
где OTHER_DIALOG константа
static final int OTHER_DIALOG=2;

И в методе onCreateDialog добавляем вывод диалога
В итоге получаем



@Override
    protected Dialog onCreateDialog(int id) {
      Dialog dialog = null;
     
      switch (id) {
      case CUSTOM_DIALOG :
   
            final AlertDialog al;
            //Моделирование окна диалога
            AlertDialog.Builder  AlE = new AlertDialog.Builder(this);
            AlE.setTitle("Диалог");
       
            al=AlE.create();    
            al.show();
            break; 

     case OTHER_DIALOG :
   
            final AlertDialog al_other;
            //Моделирование окна диалога
            AlertDialog.Builder  Al_O = new AlertDialog.Builder(this);
            Al_O.setTitle("Второй Диалог");
       
            al_other=Al_O.create();    
            al_other.show();
            break;

   }
      return dialog;     
 }






Тоже самое на видео







Полный код
//MainActivity.java

package my.ambar.dialog;

import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.view.View;
import android.widget.Button;

public class MainActivity extends Activity {
 
 protected static final int CUSTOM_DIALOG = 0;
 protected static final int OTHER_DIALOG = 1;

 @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
   
     final Button b_dialog = (Button)findViewById(R.id.b_custom_dialog_id);
     final Button b_dialog2 = (Button)findViewById(R.id.b_custom_dialog2_id);
     
     b_dialog.setOnClickListener(new View.OnClickListener() {
   
   public void onClick(View v) {
  
     showDialog(CUSTOM_DIALOG);
    
    //b_dialog.setText("Clicked");            
   }
  });
      
      b_dialog2.setOnClickListener(new View.OnClickListener() {
    
    public void onClick(View v) {
     
    
      showDialog(OTHER_DIALOG);
     
  
    }
   });




//main.xml
<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" >

    <Button 
        android:id="@+id/b_custom_dialog_id"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:layout_centerHorizontal="true"
        android:text="@string/b_custom_dialog"/>
    
    <Button 
        android:id="@+id/b_custom_dialog2_id"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="150dp"
        android:layout_centerHorizontal="true"
        android:text="@string/b_custom_dialog2"/>
    
</RelativeLayout>

//strings.xml
<resources>

    <string name="app_name">Custom_Dialog</string>
    
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
    <string name="b_custom_dialog">Open Dialog</string>
    <string name="b_custom_dialog2">Other Dialog</string>
   
</resources>



среда, 14 ноября 2012 г.

Создание Custom Dialog (часть 1. Отклик при нажатии на Button)


В этом уроке будет описано


  1. Как сделать отклик при нажатии на кнопку (Button)
  2. Как создать custom dialog
  3. Как сделать внешний вид для  custom dialog
  4. Как  сделать Spinner

В прошлом уроке было показано, как сделать Button (кнопку).
1.Теперь сделаем, чтобы при нажатии на кнопку  происходило какое-нибудь действие ,
например, менялась надпись на кнопке .
Для этого в методе MainActivity надо прописать

//находим Button
Button b_dialog = (Button)findViewById(R.id.b_custom_dialog_id);
    
//Прописываем действие при нажатии
b_dialog.setOnClickListener( new View.OnClickListener() {
           
public void onClick(View v) {
           
//действие. Изменение надписи на кнопке
b_dialog.setText(“Clicked”);       
           
            }
      });



Потребуется еще поменять Button на final, т.к. иначе на нее нельзя будет ссылаться
Т.е.
final Button b_dialog = (Button)findViewById(R.id.b_custom_dialog_id);




















Окно, появляющееся при открытии приложения





















После нажатия на Button




Те же самые действия, но на видео


Полный код
//MainActivity.java
package my.ambar.dialog;


import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.widget.Button;


public class MainActivity extends Activity {


 @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
   
     final Button b_dialog = (Button)findViewById(R.id.b_custom_dialog_id);
    
    
     b_dialog.setOnClickListener(new View.OnClickListener() {
  
  public void onClick(View v) {

   b_dialog.setText("Clicked");
  
  }
 });

    }
 
}



//main.xml
<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" >

 
    <Button 
        android:id="@+id/b_custom_dialog_id"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:layout_centerHorizontal="true"
        android:text="@string/b_custom_dialog"/>
    
   
</RelativeLayout>



//strings.xml
<resources>

    <string name="app_name">Custom_Dialog</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
    <string name="b_custom_dialog">Open Dialog</string>
   
</resources>




среда, 31 октября 2012 г.

Выкладываю видеоурок по установке и настройке eclipse для программирования под Android.