2013年5月21日 星期二

Spinner with item text aligned to center

In Android, text in Spinner is defaulted to align to left. To change the alignment, we need to create our own layout for the Spinner

activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
        tools:context=".MainActivity" />


    <Spinner
        android:id="@+id/spinner1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:entries="@array/spinner_items" />


    <Spinner
        android:id="@+id/spinner2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:entries="@array/spinner_items" />

</LinearLayout>
The main layout. spinner1 will be modified with item text aligned to center, while spinner2 is used for comparison.

spinner_center_item.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    style="?android:attr/spinnerItemStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="5dp" 
    android:paddingTop="5dp"    
    android:gravity="center"
    />
To align the item text to center, we need to create our own layout for the item. Note that the gravity is set to "center".

MainActivity.java
package com.example.sample_spinner_center;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ArrayAdapter;
import android.widget.Spinner;

public class MainActivity extends Activity {
 private Spinner spinner1;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViews();
        setCenterSpinner();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
    
    private void findViews(){
     spinner1 = (Spinner) this.findViewById(R.id.spinner1);
    }
        
    private void setCenterSpinner(){
        ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
          this, R.array.spinner_items,R.layout.spinner_center_item);
        // set whatever dropdown resource you want
        adapter.setDropDownViewResource(R.layout.spinner_center_item);
        
        spinner1.setAdapter(adapter);
        //spinner1.setOnItemSelectedListener(new MyOnItemSelectedListener());
    }
}
Just note that view layout and dropdown layout can be different.

Result:



Dropdown layout can be different with view layout
    private void setCenterSpinner(){
        ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
          this, R.array.spinner_items,R.layout.spinner_center_item);
        // set whatever dropdown resource you want
        adapter.setDropDownViewResource(android.R.layout.simple_dropdown_item_1line);
        //adapter.setDropDownViewResource(R.layout.spinner_center_item);
        
        spinner1.setAdapter(adapter);
        //spinner1.setOnItemSelectedListener(new MyOnItemSelectedListener());
    }
Note that android.R.layout.simple_dropdown_item_1line is android's built-in spinner layout

Result:

If you want a more dynamic, self-defined spinner, you can choose to create your own spinner array adapter
// A more complicated dynamic way
String[] spinnerItems = 
  getResources().getStringArray(R.array.spinner_items);
// create your own spinner array adapter
ArrayAdapter<String> adapter2 = new ArrayAdapter<String>(
  this, android.R.layout.simple_dropdown_item_1line,spinnerItems)
{
 public View getView(int position, View convertView, ViewGroup parent) {
        View v = super.getView(position, convertView, parent);
        ((TextView) v).setGravity(Gravity.RIGHT);
        ((TextView) v).setTextSize(30);
        return v;
 }
 public View getDropDownView(int position, View convertView, ViewGroup parent) {
        View v = super.getDropDownView(position, convertView,parent);
        ((TextView) v).setGravity(Gravity.CENTER);
        return v;
 }         
};
spinner2.setAdapter(adapter2); 
Result:

1 則留言: