android UI进阶之android中隐藏的layout 抽屉的运用

最近在写一个应用，想把设置页面和应用页面放在一起，这样就能实现用户可以实时看到自己的设置对UI的影响，从而更方便的设置用户喜欢的界面。想了一段时间，发现用slidingDrawer这个控件可以实现这个效果。也就是一个抽屉。拉开抽屉，占据半个屏幕，另外半个屏幕还是显示应用页面。效果还是不错的。

今天就和大家分享一下android中这个抽屉效果。其实在android的lanucher就是一个抽屉，打开它就可以看到安装的应用。相信大家都见过用过。下面我们就来做个相同的效果，当然只是UI上差不多相同的效果。

slidingDrawer这个控件使用非常简单，基本在xml里面配置就可以。代码如下所示。

                    <?xmlversion="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:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/hello"
            android:textSize="20sp"
            />
            <SlidingDrawer
            android:id="@+id/sd"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:handle="@+id/iv" 
            android:content="@+id/myContent"
            android:orientation="vertical"
            >
            
            <ImageView
            android:id="@+id/iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/open1"
            />
            
            <GridView
            android:id="@id/myContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numColumns="3"
            android:background="@drawable/background"
            android:gravity="center"
            /> 
             
            </SlidingDrawer>
            </RelativeLayout>
            
             
            
            在SlidingDrawer这个标签下android:handle：指示的就是抽屉的图片。android:content:指向的就是抽屉里面的布局。有了这个布局，其实一个抽屉就出来了。 
            
            下面我们看Chouti这个类的代码 
            
            publicclassChoutiextendsActivity{ 
             
            privateGridViewgv; 
            privateSlidingDrawersd; 
            privateImageViewiv; 
            privateint[]icons={R.drawable.browser,R.drawable.gallery, 
            R.drawable.camera,R.drawable.gmail, 
            R.drawable.music,R.drawable.market, 
            R.drawable.phone,R.drawable.messages,R.drawable.maps}; 
            privateString[]items={"浏览器","图片","相机","时钟","音乐","市场","拨号","信息","地图"}; 
             
            /**Calledwhentheactivityisfirstcreated.*/ 
            @Override 
            publicvoidonCreate(BundlesavedInstanceState){ 
            super.onCreate(savedInstanceState); 
            setContentView(R.layout.main); 
            gv=(GridView)findViewById(R.id.myContent); 
            sd=(SlidingDrawer)findViewById(R.id.sd); 
            iv=(ImageView)findViewById(R.id.iv); 
            MyAdapteradapter=newMyAdapter(this,items,icons);//自定义MyAdapter来实现图标加item的显示效果 
            gv.setAdapter(adapter); 
            sd.setOnDrawerOpenListener(newSlidingDrawer.OnDrawerOpenListener()//开抽屉 
            { 
            @Override 
            publicvoidonDrawerOpened() 
            { 
            iv.setImageResource(R.drawable.close1);//响应开抽屉事件，把图片设为向下的 
            } 
            }); 
            sd.setOnDrawerCloseListener(newSlidingDrawer.OnDrawerCloseListener() 
            { 
            @Override 
            publicvoidonDrawerClosed() 
            { 
            iv.setImageResource(R.drawable.open1);//响应关抽屉事件 
            } 
            }); 
            } 
            } 
            
            在整个类里面将布局导入，同时设置开关抽屉的监听事件。这里面我们需要自定义一个MyAdapter来显示带文字下标的图片。 
            
            下面是MyAdapter这个类的代码 
            
            
            publicclassMyAdapterextendsBaseAdapter 
            { 
            privateContext_ct; 
            privateString[]_items; 
            privateint[]_icons; 
            
            publicMyAdapter(Contextct,String[]items,int[]icons)//构造器 
            { 
            _ct=ct; 
            _items=items; 
            _icons=icons; 
            } 
            
            @Override 
            publicintgetCount() 
            { 
            return_items.length; 
            } 
            
            @Override 
            publicObjectgetItem(intarg0) 
            { 
            return_items[arg0]; 
            } 
            
            @Override 
            publiclonggetItemId(intposition) 
            { 
            returnposition; 
            } 
            
            @Override 
            publicViewgetView(intposition,ViewconvertView,ViewGroupparent) 
            { 
            LayoutInflaterfactory=LayoutInflater.from(_ct); 
            Viewv=(View)factory.inflate(R.layout.gv,null);//绑定自定义的layout 
            ImageViewiv=(ImageView)v.findViewById(R.id.icon); 
            TextViewtv=(TextView)v.findViewById(R.id.text); 
            iv.setImageResource(_icons[position]); 
            tv.setText(_items[position]); 
            returnv; 
            } 
            } 
            
            也是非常的简单，其中用到的布局如下 
            
            <?xmlversion="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"
            >
            <ImageView
            android:id="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="40px"
            android:layout_gravity="center"
            />
            <TextView 
            android:id="@+id/text"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="#ffffffff"
            />
            </LinearLayout>

这样，我们的抽屉就完成啦来看下效果之前不能看到图现在应该能了吧。

就写这么多啦。抽屉这个控件非常实用，除了我在开头所说的我在程序中的应用外，还有很多的用途，发挥你的想象力，抽屉将为你的应用增色不少。

更多相关文章

随机推荐