viernes, 26 de octubre de 2012

ActionBarSherlock: Usar, personalizar y Tabs

ActionBarSherlock es un proyecto que cualquier desarrollador puede descargar e integrar en sus proyectos. Para saber exactamente que es y que posibilidades tiene mejor consultarlo en la web. En este post nos vamos a centrar en como usar la ActionBar que ofrece.
Cómo hacerlo es muy simple:
1.- Descargar el proyecto de la web. ZIP
2.- Descomprimir...dentro de la carpeta creada existe la carpeta "library". Este carpeta es la que tenemos que importar a nuestro workspace de Eclipse.

Una vez importado el proyecto tenemos que crear un nuevo proyecto e indicarle que vamos usar el "library" como librería. Pasos:
1.- Crear proyecto.
2.- Una vez creado...Clic derecho sobre el proyecto --> Properties --> Android --> (A la parte inferior exite la opción de añadir librería) Add --> Seleccionamos el "library".

Una vez importado ya podemos usarlo. Para ello tenemos el siguiente código:

res/menu/activity_main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/menu_settings"
        android:orderInCategory="100"
        android:showAsAction="ifRoom"
        android:title="@string/menu_settings">
        <menu>
            <item
                android:id="@+id/form1"
                android:title="Form 1"/>
            <item
                android:id="@+id/form2"
                android:title="Form 2"/>
        </menu>
    </item>
    <item
        android:id="@+id/menu_map"
        android:orderInCategory="200"
        android:showAsAction="ifRoom"
        android:title="map">
    </item>

</menu>


res/values/styles.xml

<resources>
    <style name="AppTheme" parent="android:Theme.Light" />
<!-- Usaremos nuestro propio estilo sino-->
    <style name="Theme.Styled" parent="Theme.Sherlock.Light.DarkActionBar">
        <item name="actionBarStyle">@style/Widget.Styled.ActionBar</item>
        <item name="android:actionBarStyle">@style/Widget.Styled.ActionBar</item>
    </style>
<!-- Sobrescribimos la actionBarSherlock con nuestro propio background-->
    <style name="Widget.Styled.ActionBar" parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@drawable/comun_actionbar</item>
    </style>
</resources>


//Como podemos ver el Theme.Styled es custom y así nos permite personalizar el estilo de la ActionBar. NOTA: Si no lo personalizamos ponemos :Theme.Sherlock
AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.blogactionbarsherlock"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.Styled"
        <activity
            android:name=".ChooserActivity"
            android:label="@string/title_activity_main" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".SingleActivity"/>
        <activity android:name=".TabsActivity" android:label="TabsView" />
    </application>
</manifest>

activity_chooser.xml
<LinearLayout 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:orientation="vertical" >

    <Button
        android:id="@+id/button_single"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="40dip"
        android:gravity="center_horizontal"
        android:padding="@dimen/padding_medium"
        android:text="Single"
        tools:context=".MainActivity" />

    <Button
        android:id="@+id/button_tabs"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal"
        android:padding="@dimen/padding_medium"
        android:text="Tabs"
        tools:context=".MainActivity" />

</LinearLayout>

//Clase inicial (indice de la aplicación) que nos permite seleccionar entre una vista simple o bien la de los Tabs. 
ChooserActivity.java
package com.example.blogactionbarsherlock;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.actionbarsherlock.app.SherlockActivity;

public class ChooserActivity extends SherlockActivity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_chooser);

((Button) findViewById(R.id.button_single))
.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
startActivity(new Intent(ChooserActivity.this, SingleActivity.class));
}
});

((Button) findViewById(R.id.button_tabs))
.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
startActivity(new Intent(ChooserActivity.this, TabsActivity.class));
}
});

}

}

activity_single.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" >
</RelativeLayout>


SingleActivity.java
package com.example.blogactionbarsherlock;

import android.os.Bundle;
import android.widget.Toast;

import com.actionbarsherlock.app.ActionBar;
import com.actionbarsherlock.app.SherlockActivity;
import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuInflater;
import com.actionbarsherlock.view.MenuItem;

public class SingleActivity extends SherlockActivity {

private Menu mMenu;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_single);

// Customize
ActionBar actionBar = getSupportActionBar();
actionBar.setBackgroundDrawable(getResources().getDrawable(
R.drawable.comun_background_grey));
actionBar.setTitle("Custom Title");
actionBar.setDisplayShowHomeEnabled(false);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {

MenuInflater menuInflater = getSupportMenuInflater();
menuInflater.inflate(R.menu.activity_main, menu);

// Manage Menu - Customize
mMenu = menu;
mMenu.findItem(R.id.menu_map).setVisible(false);

return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_settings:
Toast.makeText(this, "Settings", Toast.LENGTH_SHORT).show();
break;

default:
break;
}

return true;
}
}

tabs_layout.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" >

    <TextView android:id="@+id/textView_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>


TabsActivity.java
package com.example.blogactionbarsherlock;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.util.Log;
import android.widget.Toast;

import com.actionbarsherlock.app.ActionBar;
import com.actionbarsherlock.app.ActionBar.Tab;
import com.actionbarsherlock.app.SherlockFragmentActivity;
import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuInflater;
import com.actionbarsherlock.view.MenuItem;

public class TabsActivity extends SherlockFragmentActivity implements
ActionBar.TabListener {

private Menu mMenu;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_single);

ActionBar actionBar = getSupportActionBar();

// Navigation
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

// create tabs
ActionBar.Tab newTab0 = getSupportActionBar().newTab();
newTab0.setText("Tab 0");
newTab0.setTag("0");
ActionBar.Tab newTab1 = getSupportActionBar().newTab();
newTab1.setText("Tab 1");
newTab1.setTag("1");

// Listeners
newTab0.setTabListener(this);
newTab1.setTabListener(this);

// add tabs
getSupportActionBar().addTab(newTab0);
getSupportActionBar().addTab(newTab1);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {

MenuInflater menuInflater = getSupportMenuInflater();
menuInflater.inflate(R.menu.activity_main, menu);

// Manage Menu
mMenu = menu;
mMenu.findItem(R.id.menu_settings).setVisible(false);

return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_settings:
Toast.makeText(this, "Settings", Toast.LENGTH_SHORT).show();
break;

default:
break;
}

return true;
}

@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
                
                //Añadimos el fragment en el tab que queremos. En este ejemplo añadimos el mismo.
Fragment ef = (Fragment) new ExampleFragment();
FragmentManager fragMgr = getSupportFragmentManager();
ft = fragMgr.beginTransaction();

switch (Integer.valueOf((String) tab.getTag())) {
case 0:
Log.d("SimpleActionBarTabsActivity",
"tab " + String.valueOf(tab.getPosition()) + " 0 clicked");
ft.add(android.R.id.content, ef, null);
break;
case 1:
Log.d("SimpleActionBarTabsActivity",
"tab " + String.valueOf(tab.getPosition()) + " 1 clicked");
ft.add(android.R.id.content, ef, null);
break;
}

ft.commit();
Log.d("SimpleActionBarTabsActivity",
"tab " + String.valueOf(tab.getPosition()) + " clicked");
}

@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
// switch (Integer.valueOf((String) tab.getTag())) {
// case 0:
// Log.d("SimpleActionBarTabsActivity",
// "tab " + String.valueOf(tab.getPosition())
// + " 0 un-clicked");
// break;
// case 1:
// Log.d("SimpleActionBarTabsActivity",
// "tab " + String.valueOf(tab.getPosition())
// + " 1 un-clicked");
// break;
// }
// Log.d("SimpleActionBarTabsActivity",
// "tab " + String.valueOf(tab.getPosition()) + " un-clicked");

}

@Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
// switch (Integer.valueOf((String) tab.getTag())) {
// case 0:
// Log.d("SimpleActionBarTabsActivity",
// "tab " + String.valueOf(tab.getPosition())
// + " 0 re-clicked");
// break;
// case 1:
// Log.d("SimpleActionBarTabsActivity",
// "tab " + String.valueOf(tab.getPosition())
// + " 1 re-clicked");
// break;
// }
// Log.d("SimpleActionBarTabsActivity",
// "tab " + String.valueOf(tab.getPosition()) + " re-clicked");

}
}

fragment_example.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" >

    <TextView android:id="@+id/textView_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

ExampleFragment.java

package com.example.blogactionbarsherlock;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.actionbarsherlock.app.SherlockFragment;

public class ExampleFragment extends SherlockFragment {

public ExampleFragment(){
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_example, container, false);
((TextView) view.findViewById(R.id.textView_tab)).setText("Custom tab");
return view;
}

}


A continuación las capturas de pantalla de la aplicación que podemos ver:

Chooser




SingleActivity + CustomActionBar + Menú




TabsActivity + ActionBar en Theme.Styled



It works!
Roger Sala


No hay comentarios:

Publicar un comentario