Android - Benutzerdefinierte Komponenten

Umsetzung eigener Komponenten in bereits verbauten Komponenten mit der sich Unterklasse mit eigenen definierten Klasse

Android bietet eine große Liste von vorgefertigten Widgets wie Buttons, Textview, EditText, Listview, CheckBox, Radiobutton, Galerie, Spinner, AutoCompleteTextView usw. die Sie direkt in Ihrem Android-Anwendungsentwicklung verwenden können, aber es kann eine Situation, wenn Sie es sind nicht vorhandene Funktionalität von einem der verfügbaren Widgets zufrieden. Android bietet Ihnen über die Erstellung Ihrer eigenen benutzerdefinierten Komponenten, die Sie individuell an Ihre Bedürfnisse anpassen.

Wenn Sie nur kleine Anpassungen an eine bestehende Widget oder das Layout zu machen, können Sie einfach eine Unterklasse das Widget oder das Layout und überschreiben Sie die Methoden, die Ihnen eine genaue Kontrolle über das Aussehen und die Funktion eines Bildschirmelements.

Dieses Tutorial erklärt Ihnen, wie Sie benutzerdefinierte Ansichten zu erstellen und sie in Ihrer Anwendung mit einfachen und leichten Schritten.

BEISPIEL FÜR BENUTZERDEFINIERTEN KOMPONENTEN IN DER HIERARCHIE BENUTZERDEFINIERTE ANSICHT

Erstellen einer einfachen benutzerdefinierten Komponente

Schritt	Bezeichnung
1	Sie werden Android-Studio IDE verwenden, um ein Android-Anwendung erstellen und benennen es als compoundview unter einem Paketcom.vogella.android.customview.compoundview wie in dem erläutertHallo Welt Beispiel Kapitel.
2	Erstellen Sie eine XML res / Werte / attrs.xml Datei, um neue Attribute zusammen mit ihren Datentyp definieren.
3	Erstellen src / ColorOptionsView.java-Datei und fügen Sie den Code in Ihre benutzerdefinierte Komponente definieren. Es wird Linearlayout erweitern und zusätzliche Funktionalität, um Farbverbindung zeigen. Sie liefern Attribute Parsinglogik in der Konstrukteure mit AttributeSet als Parameter.
4	Ändern res / layout / activity_main.xml Datei und fügen Sie den Code in Farbe Verbindung Ansicht weise zusammen mit einigen Standardattribute und neue Attribute erstellen.
5	Führen Sie die Anwendung auf Android-Emulator zu starten, und überprüfen Sie das Ergebnis der Änderungen in der Anwendung durchgeführt.

Erstellen Sie die folgenden Attribute Datei namens attrs.xml in Ihrem res / Werte-Ordner.

<?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>

Ändern Sie das Layout-Datei durch die Aktivität der folgenden verwendet.

<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>

Erstellen Sie die folgende Java-Datei mit dem Namen ColorOptionsView für Ihre Verbindung Blick.

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);
   }
}

Ändern Sie Ihre Haupttätigkeit java-Datei in den folgenden Code und führen Sie die Anwendung.

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();
   }
}

Die laufende Anwendung sollte wie in der folgenden Abbildung aussehen.

Instanziieren mit Code innerhalb Aktivitätsklasse

Es ist sehr ähnlich wie der Instanziierung benutzerdefinierte Komponente, wie Sie integrierte Widget in Ihre Aktivitätsklasse zu instanziieren. Zum Beispiel können Sie folgenden Code, um oben definiert benutzerdefinierte Komponente instantiieren verwenden können -

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

Überprüfen obigen Beispiel zu verstehen, wie eine Grund Android benutzerdefinierte Komponente instanziiert mit Code in einer Aktivität.

Instanziieren mit Layout-XML-Datei

Traditionell Du Layout-XML-Datei verwenden, um Ihre integrierten Widgets instanziieren, wird dasselbe Konzept auf eigene Widgets gelten auch, so dass Sie in der Lage, Ihre benutzerdefinierte Komponente instanziiert mit Layout-XML-Datei wie unten erläutert. Hier com.example.compoundview ist das Paket in dem Sie den gesamten Code im Zusammenhang gestellt habenDateView Klasse und DateView ist Java-Klassenname in dem Sie komplette Logik Ihrer benutzerdefinierten Komponente gesetzt haben.

<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>

Es ist wichtig, hier zu beachten, dass wir mit allen Textview-Attribute zusammen mit benutzerdefinierten Komponente ohne jede Änderung. Ähnliche Weise werden Sie in der Lage, alle Ereignisse und Methoden zusammen mit DateView Komponente verwenden.

Markieren Sie dieses Beispiel zu verstehen, wie eine Grund Android benutzerdefinierte Komponente instanziiert mit Layout-XML-Datei.

Benutzerdefinierte Komponente mit Benutzerdefinierte Attribute

Wir haben gesehen, wie wir die Funktionalität der integrierten Widgets zu verlängern, aber in den beiden oben genannten Beispiele haben wir gesehen, dass erweiterte Komponente kann die Verwendung aller Standardattribute der übergeordneten Klasse. Aber eine Situation, wenn Sie Ihr eigenes Attribut von Grund auf neu erstellen möchten. Unten ist ein einfaches Verfahren zur Erstellung und Verwendung neuer Attribute für Android Benutzerdefinierte Komponenten. Betrachten wir wollen drei Attribute einzuführen und wird sie, wie unten dargestellt verwenden -

<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"/>

Schritt 1

Der erste Schritt, um uns ermöglichen, unsere benutzerdefinierte Attribute ist, sie in eine neue XML-Datei unter definieren verwenden res / Werte / und nennen es attrs.xml. Lassen Sie uns einen Blick auf ein Beispiel attrs.xml Datei -

<?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>

Hier ist der Name = Wert ist, was wir in unserem Layout-XML-Datei als Attribut verwendet werden soll, und die format = Typ ist der Typ des Attributs.

Schritt 2

Ihre zweite Schritt wird sein, diese Attribute von Layout-XML-Datei zu lesen und stellen Sie sie für die Komponente. Diese Logik wird in den Konstrukteuren, die eine übergeben bekommen gehen AttributeSet, denn das ist, was enthält die XML-Attribute. Um die Werte in der XML zu lesen, müssen Sie zuerst eine erstellen TypedArray vom AttributeSet, dann verwenden, um zu lesen und stellen Sie die Werte wie in der folgenden Beispielcode gezeigt -

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();

Schritt 3

Schließlich können Sie Attribute in Ihrem Layout-XML-Datei wie folgt zu verwenden -

<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>

Der wichtigste Teil ist xmlns: custom ="http://schemas.android.com/apk/res/com.example.compoundview". Beachten Sie, dass http://schemas.android.com/apk/res/ wird wie es ist bleiben, aber letzten Teil wird an Ihre Paketnamen festgelegt werden und auch, dass Sie alles, was nach dem xmlns :, in diesem Beispiel habe ich verwendenbenutzerdefinierte, aber Sie einen beliebigen Namen verwenden.

About ptjqatar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

lernen Android

Android - Benutzerdefinierte Komponenten

BEISPIEL FÜR BENUTZERDEFINIERTEN KOMPONENTEN IN DER HIERARCHIE BENUTZERDEFINIERTE ANSICHT

Erstellen einer einfachen benutzerdefinierten Komponente

Instanziieren mit Code innerhalb Aktivitätsklasse

Instanziieren mit Layout-XML-Datei

Benutzerdefinierte Komponente mit Benutzerdefinierte Attribute

Schritt 1

Schritt 2

Schritt 3

About ptjqatar

0 التعليقات:

Kommentar veröffentlichen

Android - Benutzerdefinierte Komponenten

BEISPIEL FÜR BENUTZERDEFINIERTEN KOMPONENTEN IN DER HIERARCHIE BENUTZERDEFINIERTE ANSICHT

Erstellen einer einfachen benutzerdefinierten Komponente

Instanziieren mit Code innerhalb Aktivitätsklasse

Instanziieren mit Layout-XML-Datei

Benutzerdefinierte Komponente mit Benutzerdefinierte Attribute

Schritt 1

Schritt 2

Schritt 3

About ptjqatar

RELATED POSTS

0 التعليقات:

Kommentar veröffentlichen