Элементы Android

Материал из AOW

Перейти к: навигация, поиск

Содержание

ViewGroup

Класс Layout является базовым при создании интерфейсов для андроид и управляет принципом расстановки своего содержимого. Вы можете выбирать из расстановки в виде линейного списка(LinearLayout), таблицы (TableLayout), последовательного расположения(RelativeLayout) и т.д.

В этой серии статей мы исследуем каждый из видов подробно.

Содержимым Layout могут быть любые управляющие элементы или что-либо, что является View (или наследует View). Все layout`ы наследуют ViewGroup (который наследует View), таким образом, вы можете вложить layout`ы друг в друга!

Вы можете также создать свое собственное правило расположения, создав класс, который наследует ViewGroup.

Стандартные виды layout:

View

  • ViewGroupe
    • FrameLayout
    • RelativeLayout
    • LinearLayout
      • TableLayout


FrameLayout

FrameLayout предназначен, чтобы зафиксировать на экране отображение единственного элемента. Как правило, FrameLayout должен быть использован для закрепления единственного элемента интерфейса, так как обычно трудно обеспечить это при масштабирование под разный размер экрана без перекрытия элементами друг друга. Однако вы можете, добавить несколько элементов в FrameLayout и контролировать их положение в FrameLayout путем назначения привязки к каждому элементу, используя android:layout_gravity атрибут.

Последние добавленные View-элементы отображаются поверх остальных. Размер FrameLayout определяется размером самого крупнного view-элемента (плюс отступы), видимого либо скрытого (если родитель FrameLayout это позволяет). View-элементы которые скрыты (GONE) используются для определения размера, только если setConsiderGoneChildrenWhenMeasuring() установлен в true.

XML

<FrameLayout
   android:id="@android:id/tabcontent"
   android:layout_width="fill_parent"
   android:layout_height="445dp"
   android:layout_gravity="bottom" >
</FrameLayout>

Экран

Файл:FrameLayout.png

ScrollView

При большом количестве информации, которую нужно поместить на экране приходится использовать полосы прокрутки. В Android существуют специальные виджеты ScrollView и HorizontalScrollView, которые являются контейнерными элементами и наследуются от ViewGroup. Обратите внимание, что класс TextView использует свою собственную прокрутку и не нуждается в добавлении отдельных полос прокрутки. Но использование отдельных полос даже с TextView может улучшить вид вашего приложения и повышает удобство работы для пользователя.

В контейнеры ScrollView и HorizontalScrollView можно размещать только один дочерний элемент (обычно LinearLayout), который в свою очередь может быть контейнером для других элементов. Виджет ScrollView, несмотря на свое название, поддерживает только вертикальную прокрутку, поэтому для создания вертикальной и горизонтальной прокрутки необходимо использовать ScrollView в сочетании с HorizontalScrollView. Обычно ScrollView используют в качестве корневого элемента, а HorizontalScrollView — дочернего.

Если полосы прокрутки вас раздражают, то используйте атрибут android:scrollbars="none", который скроет их.

XML

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/scroll" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 
<HorizontalScrollView 
    android:id="@+id/hscroll" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 
<TextView 
    android:id="@+id/textview" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:textSize="24px" 
    android:isScrollContainer="true"/> 
</HorizontalScrollView> 
</ScrollView> 

В в теле метода onCreate() создайте ссылку на элемент TextView, объявленный в XML-разметке, и запишите в него через метод setText() какой-нибуль длинный текст, который не поместится в видимые размеры экрана устройства:

TextView text (TextView)findViewById(R.id.textview); // загружаем текст text.setText("здесь должен быть длинный текст");

Файл:ScrollView.png

LinearLayout

Макет разметка LinearLayout выравнивает все дочерние объекты в одном направлении — вертикально или горизонтально. Направление задается при помощи атрибута ориентации android:orientation.

Все дочерние элементы помещаются в стек один за другим, так что вертикальный список представлений будет иметь только один дочерний элемент в строке независимо от того, насколько широким он является. Горизонтальное расположение списка будет размещать элементы в одну строку с высотой, равной высоте самого высокого дочернего элемента списка.

XML

Ниже приведен код разметки с основным макетом LinearLayout и двумя вложенными дочерними макетами, один из которых имеет горизонтальную ориентацию другой вертикальную.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical" android:layout_width="fill_parent"
       android:layout_height="fill_parent">
       <LinearLayout android:id="@+id/top_container" 
               android:orientation="horizontal"
               android:layout_weight="0" 
               android:layout_width="fill_parent"
               android:layout_height="wrap_content">
               <Button 
                       android:layout_width="fill_parent"
                       android:layout_height="wrap_content"
                       android:text="top" />
       </LinearLayout>
       <LinearLayout android:orientation="horizontal"
               android:layout_weight="1" 
               android:layout_width="fill_parent"
               android:layout_height="fill_parent">
               <LinearLayout android:id="@+id/left_container"
                       android:orientation="vertical" 
                       android:layout_weight="0"
                       android:layout_width="wrap_content" 
                       android:layout_height="fill_parent">
                       <Button 
                               android:layout_width="fill_parent"
                               android:layout_height="fill_parent"
                               android:text="left" />
               </LinearLayout>
               <LinearLayout android:id="@+id/center_container"
                       android:orientation="vertical" 
                       android:layout_weight="1"
                       android:layout_width="fill_parent" 
                       android:layout_height="fill_parent">
                       <Button 
                               android:layout_width="fill_parent"
                               android:layout_height="fill_parent"
                               android:text="center" />
               </LinearLayout>
               <LinearLayout android:id="@+id/right_container"
                       android:orientation="vertical" 
                       android:layout_weight="0"
                       android:layout_width="wrap_content" 
                       android:layout_height="fill_parent">
                       <Button 
                               android:layout_width="fill_parent"
                               android:layout_height="fill_parent"
                               android:text="right" />
               </LinearLayout>
       </LinearLayout>
       <LinearLayout android:id="@+id/bottom_container"
               android:orientation="horizontal" 
               android:layout_weight="0"
               android:layout_width="fill_parent" 
               android:layout_height="wrap_content">
               <Button 
                               android:layout_width="fill_parent"
                               android:layout_height="wrap_content"
                               android:text="bottom" />
       </LinearLayout>
</LinearLayout>

Экран

Файл:LinearLayout.png


TableLayout

Разметка макет TableLayout (Табличная разметка) - позиционирует свои дочерние элементы в строки и столбцы, как это привыкли делать веб-мастера в теге . TableLayout не отображает линии обрамления для их строк, столбцов или ячеек. TableLayout может иметь строки с разным количеством ячеек. При формировании разметки таблицы некоторые ячейки при необходимости можно оставлять пустыми. При создании разметки для строк используются объекты TableRow, которые являются дочерними классами TableLayout (каждый TableRow определяет единственную строку в таблице). Строка может не иметь ячеек или иметь одну и более ячеек, которые являются контейнерами для других объектов. В ячейку допускается вкладывать другой TableLayout или LinearLayout.
XML
 <?xml version="1.0" encoding="utf-8"?>
 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TableRow>
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="Table Row1 Button1" />
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="Table Row1 Button2" />
    </TableRow>
    <TableRow>
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="Table Row2 Button1" />
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="Table Row2 Button2" />
    </TableRow>
    <TableRow>
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="Table Row3 Button1" />
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="Table Row3 Button2" />
    </TableRow>
 </TableLayout>

Экран

Файл:TableLayout.png

RelativeLayout

RelativeLayout - является ViewGroup, который отображает дочерние View-элементы с относительным позиционированием. Положение View может быть задано как относительно соседних элементов (например, выравнен по левой или нижней стороне элемента), либо позиционированно относительно области макета RelativeLayout (например, привязано к низу, левой стороне или к центру макета).

RelativeLayout предоставляет очень полезную возможность проектирования пользовательского интерфейса, без необходимости использовать вложенные ViewGroup-элементы. Если вы используете несколько вложенных LinearLayout, вы можете заменить их одним RelativeLayout.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
   <TextView
       android:id="@+id/label"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:text="Type here:"/>
   <EditText
       android:id="@+id/entry"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:background="@android:drawable/editbox_background"
       android:layout_below="@id/label"/>
   <Button
       android:id="@+id/ok"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_below="@id/entry"
       android:layout_alignParentRight="true"
       android:layout_marginLeft="10dip"
       android:text="OK" />
   <Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_toLeftOf="@id/ok"
       android:layout_alignTop="@id/ok"
       android:text="Cancel" />
</RelativeLayout>

Обратите внимание, на каждый из android:layout_ * атрибутов, такие как layout_below, layout_alignParentRight и layout_toLeftOf. При использовании RelativeLayout, вы можете использовать эти атрибуты, для описания положение каждого View. Каждый из этих атрибутов определяет различные варианты относительного позиционирования. Некоторые атрибуты используют идентификатор соседнего View-элемента чтобы определить своё положение. Например, для последней кнопки определено положение слева и выравнивание по верху относительно View-элемента имеющего ID ok.

Экран

Файл:RelativeLayout.png

TextView

Виджет TextView предназначен для отображения текста без возможности редактирования его пользователем, что видно из его названия (Text - текст, view - просмотр).

Иерархия классов текстовых полей

View

  • TextView
    • EditText

TextView один из самых используемых виджетов. С его помощью пользователю удобнее ориентироваться в программе. По сути, это как таблички: Руками не трогать, По газону не ходить, Вход с собаками воспрещен, Часы работы с 9.00 до 18.00. и т.д., и служит для представления пользователю описательного текста.

Для отображения текста в Textview в файле разметки используется атрибут android:text, например:

android:text="Погладь кота, ...!" 

Такой подход является нежелательным. Рекомендуется всегда использовать текстовые ресурсы. В будущем эта привычка позволит вам обеспечить многоязыковую поддержку:

android:text="@string/hello"

Программно текст можно задать методом setText():

  • Загружаем виджет из ресурсов
TextView text (TextView)findViewById(R.id.text1);
  • Задаем текст
text.setText("Hello, Android!");
  • Задаем текст с использованием текстовых ресурсов
text.setText(R.string.hello);

Атрибуты

  • Размер текста. При установке размера текста используются несколько единиц измерения: px (пиксели), dp, sp, in (дюймы), pt, mm. Для текстов рекомендуется использовать sp: android:textSize="48sp"
android:textsize
  • Стиль текста. Используются константы: normal, bold, italic. Например, android:textStyle="bold"
android:textstyle
  • Цвет текста. Используются четыре формата в шестнадцатеричной кодировке: #RGB; #ARGB; #RRGGBB; #AARRGGBB, где R, G, B — соответствующий цвет, А — прозрачность (alpha-channel). Значение А, установленное в 0, означает прозрачность 100%.
android:textcolor

Для всех вышеперечисленных атрибутов в классе Textview есть соответствующие методы для чтения или задания соответствующих свойств.

  • Если вы хотите создать многострочный текст в TextView, то используйте символы \n для переноса строк.
<string name="about_text">
   У лукоморья дуб зелёный;\n
   Златая цепь на дубе том:\n
   И днём и ночью кот учёный\n
   Всё ходит по цепи кругом;\n
   Идёт направо - песнь заводит,\n
   Налево - сказку говорит.
</string>

или

textView.setText("Первая строка \nВторая строка \nТретья строка");

XML

 <?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"
    android:gravity="center">
    <TextView android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello"
        android:gravity="center"
        android:textSize="20sp"
        android:textColor="#ff0000"
        android:textStyle="bold|italic"
        android:id="@+id/TextContoh" />
 </LinearLayout>

Экран

Файл:textview.png


EditText

Виджет EditText — это текстовое поле для пользовательского ввода, которое используется, если необходимо редактирование текста. Следует заметить, что EditText является наследником TextView.

Атрибуты

  • Текст-подсказка

Веб-мастера знают о таком атрибуте HTML5 как placeholder, когда в текстовом поле выводится строчка-подсказка приглушенным (обычно серым цветом). Живой пример приведен ниже.

Подсказка видна, если текстовый элемент не содержит пользовательского текста. Как только пользователь начинает вводить текст, то подсказка исчезает. Соответственно, если удалить пользовательский текст, то подсказка появляется снова. Это очень удобное решение во многих случаях, когда на экране мало места для элементов.

В Android у многих элементов есть свойство Hint (атрибут hint), который работает аналогичным образом. Установите у данного свойства нужный текст и у вас появится текстовое поле с подсказкой.

  • Вызов нужной клавиатуры

Не во всех случаях нужна стандартная клавиатура с буковками и цифрами. Если вы пишете калькулятор, то проще показать пользователю цифровую клавиатуру. А если нужно ввести электронный адрес, то удобнее показать клавиатуру, где уже есть символ @. Ну а если ваше приложение пишется для котов, то достаточно вывести только те буквы, из которых можно составить слова Мяу и Жрать давай (к сожалению, такой клавиатуры еще нет, но Google работает в этом направлении).

У элемента EditText на этот случай есть атрибут inputType:


<EditText android:id="@+id/etWidth1"
   android:hint="@string/catname"
   android:inputType="textCapWords"
   android:layout_height="wrap_content"
   android:layout_width="wrap_content">
</EditText>

В данном случае с атрибутом inputType="textCapWords" каждый первый символ предложения автоматически будет преобразовываться в прописную. Удобно, не так ли?

Если вам нужен режим CapsLock, то используйте значение textCapCharacters и все буквы сразу будут большими при наборе.

Для набора телефоного номера используйте phone, и тогда вам будут доступны только цифры, звездочка (*), решетка (#).

Для ввода веб-адресов удобно использовать значение textUri. В этом случае у вас появится дополнительная кнопочка .com (при долгом нажатии на нее появятся альтернативные варианты .net, .org и др.).

  • Вот вам целый список доступных значений (иногда различия очень трудно различимы)
text
textCapCharacters
textCapWords
textCapSentences
textAutoCorrect
textAutoComplete
textMultiLine
textImeMultiLine
textNoSuggestions
textUri
textEmailAddress
textEmailSubject
textShortMessage
textLongMessage
textPersonName
textPostalAddress
textPassword
textVisiblePassword
textWebEditText
textFilter
textPhonetic
number
numberSigned
numberDecimal
phone
datetime
date
time


  • minLines и maxLines

Позволяют ограничить количество строк текста, которое можно ввести в текстовом поле

  • maxLength

Позволяет задать максимальное количество символов для ввода

  • Методы

Основной метод класса EditText — getText(), который возвращает текст, содержащийся в окне элемента EditText. Возвращаемое значение имеет специальный тип Editable, а не String.

String strCatName = nickNameEditText.getText().toString(); // приводим к типу String

Соответственно, для установки текста используется метод setText().

Большинство методов для работы с текстом унаследованы от базового класса TextView: setTypeface(null, Typeface), setTextSize(int textSize), SetTextColor(int Color).

  • Выделение текста

У EditText есть специальные методы для выделения текста:

   selectAll() — выделяет весь текст;
   setSelection(int start, int stop) — выделяет участок текста с позиции start до позиции stop;
   setSelection(int index) — перемещает курсор на позицию index;

Предположим, нам нужно выделить популярное слово из трёх букв в большом слове (это слово "кот", а вы что подумали?).


// выделяем 4, 5, 6 символы edit.setSelection(3, 6);

  • Выделение текста

У EditText есть специальные методы для выделения текста:

   selectAll() — выделяет весь текст;
   setSelection(int start, int stop) — выделяет участок текста с позиции start до позиции stop;
   setSelection(int index) — перемещает курсор на позицию index;

Предположим, нам нужно выделить популярное слово из трёх букв в большом слове (это слово "кот", а вы что подумали?).

  • Выделяем 4, 5, 6 символы
edit.setSelection(3, 6);


  • Обработка нажатий клавиш

Для обработки нажатий клавиш необходимо зарегистрировать обработчик View.OnKeyListener, используя метод setOnKeyListener() элемента EditText. Например, для прослушивания события нажатия клавиши Enter во время ввода текста пользователем (или котом), используйте следующий код:

final EditText myText = (EditText)findViewById(R.id.EditText1);
myText.setOnKeyListener(new View.OnKeyListener()
{
    public boolean onKey(View v, int keyCode, KeyEvent event)
	{
	    if(event.getAction() == KeyEvent.ACTION_DOWN && 
		    (keyCode == KeyEvent.KEYCODE_ENTER))
			{
			    // сохраняем текст, введенный до нажатия Enter в переменную
			    String strCatName = myText.getText.getText().toString();
				return true;
			}
		return false;
	}
}
);
  • Сравнение текстовых полей при наборе текста

Другой вариант - представьте себе, что у вас есть два текстовых поля для ввода пароля и повторный ввод для его подтверждения. Добавим также элемент TextView, в котором будем отображать информацию о том, совпадают ли введенные пароли или нет. Мы будем проверять на совпадение строки в момент набора текста пользователем.

 final EditText et1 = (EditText)findViewById(R.id.edittext_pwd1);
 final EditText et2 = (EditText)findViewById(R.id.edittext_pwd2);
 final TextView info = (TextView)findViewById(R.id.textview_compare);

 et2.addTextChangedListener(new TextWatcher()
 {
    public void afterTextChanged(Editable s)
	{
	    String strPass1 = et1.getText().toString();
		String strPass2 = et2.getText().toString();
		
		if(strPass1.equals(strPass2))
		{
		    info.setText(R.string.settings_pws_equals); // текст, что пароли совпадают
		}
		else
		{
		    info.setText(R.string.settings_pws_not_equals);
		}
	}
 }
 );

В этом примере пользователь вводит сначала любой пароль в первом поле. Когда он начинает вводить пароль во втором поле, то после каждого введенного символа идет проверка на совпадение паролей и присваивает соответствующий текст элементу TextView. Пустой ли EditText

  • Чтобы проверить, пустой ли EditText, можно воспользоваться кодом:
if (editText.getText().toString().equals(""))
{
// Здесь код, если EditText пуст
}
else
{
// если есть текст, то здесь другой код
}
  • Также можно проверять длину текста, если она равно 0, значит текст пуст.
if (editText.getText().length() == 0)
  • Убрать фокус с текстового поля

Если вам нужно убрать мигающий курсор с текстового поля, то можно пойти на хитрость. Добавьте перед EditText в файле разметки следующий код:

<LinearLayout 
   android:focusable="true"
   android:focusableInTouchMode="true" 

android:layout_width="0px"

   android:layout_height="0px" />

Этот элемент заберёт на себя фокус. Также попробуйте прописать в манифесте для нужной активности строчку android:windowSoftInputMode="stateHidden". Удалить текст при получении фокуса

Если логика вашего приложения требует убрать текст из EditText при получении фокуса, то вам необходимо отслеживать момент получения этого фокуса

 EditText edit2 = (EditText) findViewById(R.id.editText2);

 edit2.setOnFocusChangeListener(new View.OnFocusChangeListener() {
	public void onFocusChange(View v, boolean hasFocus) {
		if (hasFocus) {
			edit2.setText("");
			// второй вариант
			//edit2.setText("", TextView.BufferType.EDITABLE);
		}
	}
 });
  • AutoCompleteTextView

Виджет AutoCompleteTextView - это текстовое поле с автозаполнением и возможностью редактирования вводимого текста. Использование виджета удобно в том случае, когда требуется ускорить процесс ввода текста.

На панели инструментов элемент можно найти в той же папке Text Fields.

AutoCompleteTextView является подклассом EditText, поэтому доступны все возможности форматирования и редактирования текста родительского класса, описанного выше.

Дополнительно, у AutoCompleteTextView есть свойство completionThreshold для указания минимального числа символов, которое должен ввести пользователь, чтобы включилась функция автозаполнения. Для связывания с данными необходимо задействовать адаптер, содержащий список значений через метод setAdapter().

Для упрощения создадим статический массив строк с именами котов и свяжем его через адаптер с нашим элементом в Java-коде. В реальных приложениях лучше использовать строковые ресурсы.


<AutoCompleteTextView
   android:id="@+id/autoCompleteTextView1"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="" >
</AutoCompleteTextView>
 public class ViewsDemoActivity extends Activity implements TextWatcher {

	AutoCompleteTextView mAutoComplete;
	final String[] mContacts = { "Мурзик", "Рыжик", "Барсик", "Борис",
			"Бегемот", "Мурка" };

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		mAutoComplete = (AutoCompleteTextView) findViewById(R.id.autoCompleteTextView1);
		mAutoComplete.addTextChangedListener(this);
		mAutoComplete.setAdapter(new ArrayAdapter(this,
				android.R.layout.simple_dropdown_item_1line, mContacts));
	}

	@Override
	public void afterTextChanged(Editable arg0) {
		// TODO Auto-generated method stub
	}

	@Override
	public void beforeTextChanged(CharSequence s, int start, int count,
			int after) {
		// TODO Auto-generated method stub
	}

	@Override
	public void onTextChanged(CharSequence s, int start, int before, int count) {
		// TODO Auto-generated method stub
	}
 }

Если вы напечатаете два символа му, то появится выпадающий список с вариантами слов для продолжения. Дальше текст можно не набирать, а просто коснуться нужного варианта и готовый текст сразу вставится в текстовое поле. Вот так все просто и работает.

  • Удалить текст при получении фокуса
 EditText edit2 = (EditText) findViewById(R.id.editText2);

 edit2.setOnFocusChangeListener(new View.OnFocusChangeListener() {
	public void onFocusChange(View v, boolean hasFocus) {
		if (hasFocus) {
			edit2.setText("");
			// второй вариант
			//edit2.setText("", TextView.BufferType.EDITABLE);
		}
	}
 });

Button

Кнопка - один из самых распространенных элементов управления в программировании. Наследуется от Textview и является базовым классом для класса СompoundButton. От класса CompoundButton в свою очередь наследуются такие элементы как CheckBox, ToggleButton и RadioButton. В Android для кнопки используется класс android.widget.Button. На кнопке располагается текст и на кнопку нужно нажать, чтобы получить результат. Альтернативой ему может служить элемент ImageButton (android.widget.ImageButton), у которого вместо текста используется изображение.


CompoundButton

Элемент управления ToggleButton по своей функциональности похож на флажок (checkbox) или переключатель (radiobutton) - Это кнопка, которая может находиться в одном из двух состояний: активна (On) или неактивна (Off). По умолчанию на кнопке написано Оn, если она активна, и Off - если нет. По внешнему виду это обычная кнопка с декоративной полоской в нижней части, которая подсвечивается в включенном состоянии (имитация LED-индикатора).

Файл:CompoundButton.jpg

Если надписи On/Off для вашей программы не подходят, их можно изменить при помощи свойств Text on (атрибут android:textOn) и Text off (атрибут android:textOff). Поскольку надписи Оn и Off на кнопке-переключателе являются отдельными атрибутами, атрибут android: text не используется, он доступен, так как наследуется от ТextView, но в данном случае без него можно обойтись. В программном коде им соответствуют методы setTextOff() и setTextOn().

По умолчанию, ToggleButton находится в выключенном состоянии, чтобы его "включить", установите свойство checked в значение true. Свойству соответствует метод setChecked(boolean checked).

Основное событие ToggleButton — изменение состояния кнопки onCheckedChanged().

Напишем демонстрационную программу с использованием ToggleButton. Добавим на форму метку, изображение и кнопку-переключатель:

XML

 
 <?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/tvInfo"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

    <ToggleButton
        android:id="@+id/toggleButton1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checked="false"
        android:text="ToggleButton"
        android:textOff="Не гладить"
        android:textOn="Гладить" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/gladcat" />

 </LinearLayout>

Для создания обработчика события изменения состояния кнопки необходима реализация интерфейса CompoundButton.OnCheckedChangeListener. Интерфейс имеет единственный метод onCheckedChanged(), который необходимо переопределить в нашем классе. При обработке события для определения состояния используется параметр isChecked.

package ru.alexanderklimov.togglebuttondemo;

import android.app.Activity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.TextView;
import android.widget.ToggleButton;

public class ToggleButtonDemoActivity extends Activity implements
		OnCheckedChangeListener {

	ToggleButton toogleButton;
	TextView tvInfo;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		toogleButton = (ToggleButton) findViewById(R.id.toggleButton1);
		tvInfo = (TextView) findViewById(R.id.tvInfo);

		toogleButton.setOnCheckedChangeListener(this);
	}

	@Override
	public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
		// TODO Auto-generated method stub
		if (isChecked)
			tvInfo.setText("Состояние: Включён");
		else
			tvInfo.setText("Состояние: Выключен");
	}
 }

CheckBox

Элемент CheckBox является флажком, с помощью которого пользователь может отметить(поставить галочку) определенную опцию. Очень часто флажки используются в настройках, когда нужно выборочно выбрать определенные пункты, необходимые для комфортной работы пользователю.

Файл:CheckBox.jpg

Для экспериментов воспользуемся программой «Счетчик ворон», которую писали при изучении щелчка кнопки.

Как вы помните, в программе была кнопка и текстовое поле. Добавим еще два элемента CheckBox, а также четыре текстовые метки TextView. Нам нужно постараться, чтобы элементы были аккуратно сгруппированы. Для этой цели воспользуемся вложенными LinearLayout. Заодно применим интересный прием - мы не будем использовать текст у флажков CheckBox, а воспользуемся текстовыми метками с разными размерами шрифтов. Верхняя метка с крупным шрифтом будет указывать на основную функциональность флажка, а нижняя метка с мелким шрифтом будет использоваться в качестве своеобразной подсказки, в которой содержится дополнительная информация для пользователя.

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="2dp">
    <EditText 
        android:id="@+id/editText"
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent">
    </EditText>
    <Button 
        android:id="@+id/buttonCounter"
        android:text="@string/button_text" 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent">
    </Button>
    <LinearLayout 
        android:orientation="horizontal"        
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:padding="4dp">
        <LinearLayout 
            android:orientation="vertical" 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" android:padding="2dp">
            <TextView 
                android:text="@string/color_large" 
                android:id="@+id/textViewColorLarge" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:textSize="18sp">
            </TextView>
            <TextView 
                android:text="@string/color_small" 
                android:id="@+id/textViewColorSmall" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:textSize="12sp">
            </TextView>
        </LinearLayout>
        <LinearLayout 
            android:gravity="right" 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:padding="2dp">
            <CheckBox
                android:id="@+id/checkBoxColor" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content">
            </CheckBox>
        </LinearLayout>
    </LinearLayout>
    <LinearLayout 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:orientation="horizontal" 
        android:padding="4dp">
        <LinearLayout 
            android:orientation="vertical" 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:padding="2dp">
            <TextView 
                android:text="@string/bold_large" 
                android:id="@+id/textViewBoldLarge" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:textSize="18sp">
            </TextView>
            <TextView 
                android:text="@string/bold_small" 
                android:id="@+id/textViewBoldSmall" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:textSize="12sp">
            </TextView>
        </LinearLayout>
        <LinearLayout 
            android:gravity="right" 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:padding="2dp">
            <CheckBox 
                android:id="@+id/checkBoxBold" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content">
            </CheckBox>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Флажки в нашем приложении нужны для того, чтобы пользователь мог менять вывод текста в текстовом поле. По желанию, можно выводить текст красным цветом и жирным стилем по отдельности или в совокупности. Для этого нам нужно добавить дополнительные строчки кода в обработчик щелчка кнопки.

CODE

CheckBox checkboxColor;
CheckBox checkboxBold;
...
checkboxColor = (CheckBox)findViewById(R.id.checkBoxColor);
checkboxBold = (CheckBox)findViewById(R.id.checkBoxBold);
...
buttonCount.setOnClickListener(new OnClickListener() {
	
	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		if(checkboxColor.isChecked())
			edittextMessage.setTextColor(Color.RED);
		else
			edittextMessage.setTextColor(Color.BLACK);
		
		if(checkboxBold.isChecked())
			edittextMessage.setTypeface(Typeface.DEFAULT_BOLD);
		else
			edittextMessage.setTypeface(Typeface.DEFAULT);
		
		edittextMessage.setText("Я насчитал " + ++count + " ворон");
	}
});

Запустите проект и попробуйте снимать и ставить галочки у флажков в разным комбинациях, чтобы увидеть, как меняется текст после щелчка кнопки. Код очень простой - проверяется свойство isChecked. Если галочка у флажка установлена, то свойство возвращает True и мы меняем цвет (красный) или стиль текста (жирный). Если флажок не отмечен, то свойство возвращает False, и мы используем стандартные настройки текста.

ToggleButton

RadioButton

ImageView

ImageView - Компонент отображающий произвольное изображение, например иконки. Класс ImageView можете загружать изображения из различных источников. Виджет ImageView предназначен для отображения графики.

ImageView является базовым элементом-контейнером для использования графики. Можно загружать изображения из разных источников, например, из ресурсов программы, контент-провайдеров. В классе ImageView существует есть несколько методов для загрузки изображений:

   setImageResource(int resId) — загружает изображение по идентификатору ресурса;
   setImageDrawable(Drawable drawable) - загружает готовое изображение;
   setImageURI (Uri uri) — загружает изображение по его URI;
   setImageBitmap(Bitmap bitmap) — загружает растровое изображение.

Для загрузки изображения в XML-файле используется атрибут android:src.

Также вам часто придется использовать методы, связанные с размерами и масштабированием: setMaxHeight(), setMaxWidth(), getMinimunHeight(), getMinimunWidth(), getScaleType(), setScaleType().

XML

  • Загрузка изображения из интернета (Не работает с Android 4.0)

Загрузки изображения по его URL в ImageView. Разместим на форме текстовое поле и контейнер для изображения.

<?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" >
    <TextView
        android:id="@+id/txtUrl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <ImageView
        android:id="@+id/imgView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

Экран

Файл:imageview.png

ImageButton

.
Личные инструменты

Разработка веб-сайтов, автоматизация.
По всем вопросам обращайтесь по телефонам:

+7 495 640 29 90
http://artofweb.ru