[Android]：导航抽屉如何创建这样的东西？

时间：2014-08-06 13:15:24

标签： android listview android-listview

如何让线条与圆球图像同步，以及点击时如何更改文字和图像？

我想做这样的事情： https://www.behance.net/gallery/13564677/Blog

我得到了ListView，但我只是需要帮助建立直线穿过圆球图像。

感谢您的帮助！

我的守则遵循：

我的activity_main.xml 

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#d3d3d3" 
    >

    <FrameLayout
        android:id="@+id/mainContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    </FrameLayout>

    <ListView
        android:id="@+id/drawerList"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:divider="@null"
        android:layout_gravity="left"
        android:background="#A55676"
        >
    </ListView>

</android.support.v4.widget.DrawerLayout>

custom_row.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="horizontal"
    android:paddingLeft="35dp"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:orientation="horizontal"
        android:background="@drawable/border"
        >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="-5sp"
            android:paddingTop="30dp"
             />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="90dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:paddingBottom="25dp"
            android:drawablePadding="20dp"
            android:paddingLeft="3dp"
            android:paddingTop="25dp"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#ffffff" />
    </LinearLayout>

</LinearLayout>

MainActivity.java 

import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.content.Context;
import android.content.Intent;
import android.content.res.Configuration;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity implements OnItemClickListener  {

    private DrawerLayout drawerLayout;
    private ListView listview;
    private ActionBarDrawerToggle drawerListener;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        listview=(ListView) findViewById(R.id.drawerList);
        drawerLayout=(DrawerLayout)findViewById(R.id.drawerlayout);


        MyAdapter myAdapter = new MyAdapter(this);

        listview.setAdapter(myAdapter);

        drawerLayout.setDrawerShadow(R.drawable.navbar_shadow, Gravity.LEFT);

        drawerListener = new ActionBarDrawerToggle(this, drawerLayout,R.drawable.ic_drawer,R.string.drawer_open, R.string.drawer_close)
        {

        @Override
        public void onDrawerClosed(View drawerView) 
        {
            // TODO Auto-generated method stub
           Toast.makeText(MainActivity.this,"Drawer Closed", Toast.LENGTH_LONG).show();
        }

           @Override
            public void onDrawerOpened(View drawerView) {
                // TODO Auto-generated method stub
             Toast.makeText(MainActivity.this,"Drawer Opened", Toast.LENGTH_LONG).show();
            }

        };

        drawerLayout.setDrawerListener(drawerListener);
        getActionBar().setHomeButtonEnabled(true);
        getActionBar().setDisplayHomeAsUpEnabled(true);
        getActionBar().setDisplayShowTitleEnabled(false);
        getActionBar().setIcon(R.color.transparent);
        listview.setOnItemClickListener(this);

     }


    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onPostCreate(savedInstanceState);
        drawerListener.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        // TODO Auto-generated method stub
        super.onConfigurationChanged(newConfig);
        drawerListener.onConfigurationChanged(newConfig);   
    }


    public void selectItem(int position) 
    {// TODO Auto-generated method stub 
        listview.setItemChecked(position, true);
        //setTitle(planets[position]);
    }   

    public void setTitle(String title)
    {
    getActionBar().setTitle(title); 
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // TODO Auto-generated method stub

        if(drawerListener.onOptionsItemSelected(item))
        {
        return true;    
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position,
            long id) 
    {      // TODO Auto-generated method stub

        ImageView titleImageView = (ImageView)view.findViewById(R.id.imageView1);
        TextView titleTextView = (TextView)view.findViewById(R.id.textView1);

        switch(position)
        {  
        case 0:
        if (titleImageView.getDrawable().getConstantState() == getResources().getDrawable( R.drawable.ic_new).getConstantState()){
            titleImageView.setImageResource(R.drawable.ic_new1);
            titleTextView.setTypeface(Typeface.DEFAULT_BOLD);
        }
        else
        {
            titleImageView.setImageResource(R.drawable.ic_new);
            titleTextView.setTextAppearance(getApplicationContext(), R.style.normalText);
        }
        break;
        case 1:

        if (titleImageView.getDrawable().getConstantState() == getResources().getDrawable( R.drawable.ic_new).getConstantState())
        {   
        titleImageView.setImageResource(R.drawable.ic_new1);
        titleTextView.setTypeface(Typeface.DEFAULT_BOLD);
        }
        else
        {
            titleImageView.setImageResource(R.drawable.ic_new);
            titleTextView.setTextAppearance(getApplicationContext(), R.style.normalText);
        }
        break;
        case 2:
        if (titleImageView.getDrawable().getConstantState() == getResources().getDrawable( R.drawable.ic_new).getConstantState())
        {   
        titleImageView.setImageResource(R.drawable.ic_new1);
        titleTextView.setTypeface(Typeface.DEFAULT_BOLD);
        }
        else
        {
            titleImageView.setImageResource(R.drawable.ic_new);
            titleTextView.setTextAppearance(getApplicationContext(), R.style.normalText);
        }
        break;
        case 3:
        if (titleImageView.getDrawable().getConstantState() == getResources().getDrawable( R.drawable.ic_new).getConstantState())
        {
            titleImageView.setImageResource(R.drawable.ic_new1);
            titleTextView.setTypeface(Typeface.DEFAULT_BOLD);
        }
        else
        {
            titleImageView.setImageResource(R.drawable.ic_new);
            titleTextView.setTextAppearance(getApplicationContext(), R.style.normalText);
        }

        Intent intent = new Intent(getApplicationContext(),Featured.class);
        startActivity(intent);


        break;
        case 4:
            if (titleImageView.getDrawable().getConstantState() == getResources().getDrawable( R.drawable.ic_new).getConstantState())
            {
                titleImageView.setImageResource(R.drawable.ic_new1);
                titleTextView.setTypeface(Typeface.DEFAULT_BOLD);
            }
            else
            {
                titleImageView.setImageResource(R.drawable.ic_new);
                titleTextView.setTextAppearance(getApplicationContext(), R.style.normalText);
            }

        break;
        case 5:
            if (titleImageView.getDrawable().getConstantState() == getResources().getDrawable( R.drawable.ic_new).getConstantState())
            {
                titleImageView.setImageResource(R.drawable.ic_new1);
                titleTextView.setTypeface(Typeface.DEFAULT_BOLD);   
            }
            else
            {
                titleImageView.setImageResource(R.drawable.ic_new);
                titleTextView.setTextAppearance(getApplicationContext(), R.style.normalText);
            }   
        break;  
        default:
        break;  

        }   
    }
    }


    class MyAdapter extends BaseAdapter
    {
            String[] socialSites;
            int [] images = {R.drawable.ic_new,R.drawable.ic_new,R.drawable.ic_new,R.drawable.ic_new,R.drawable.ic_new,R.drawable.ic_new};
            Context context;

            public MyAdapter(Context context) {
                // TODO Auto-generated constructor stub
                this.context=context;
                socialSites = context.getResources().getStringArray(R.array.social);
            }

            @Override
            public int getCount() {
                // TODO Auto-generated method stub
                return socialSites.length;
            }

            @Override
            public Object getItem(int position) {
                // TODO Auto-generated method stub
                return socialSites[position];
            }

            @Override
            public long getItemId(int position) {
                // TODO Auto-generated method stub
                return position;
            }

            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                // TODO Auto-generated method stub
                View row = null;
                if(convertView == null)
                {
                LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);   
                row = inflater.inflate(R.layout.custom_row,parent, false);
                }
                else
                {
                row=convertView;    
                }
                TextView titleTextView = (TextView) row.findViewById(R.id.textView1);
                ImageView titleImageView = (ImageView) row.findViewById(R.id.imageView1);
                titleTextView.setText(socialSites[position]);
                titleImageView.setImageResource(images[position]);
                return row;

   }        
}

1 个答案:

答案 0 :(得分：1)

使用ListView，并为每个项目的背景指定一个9-patch drawable，其中包含一个居中点和一条垂直线。

整个技巧将是正确指定九个补丁的可拉伸区域（拉伸线而不是点）。

如果您对此感到满意，只需为活动元素创建一个不同的点外观，并使用XML选择器drawable将默认或激活状态9补丁指定给后台。

相关问题
最新问题