`
longgangbai
  • 浏览: 7340177 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

【转】android UI进阶之仿iphone的tab效果 (Android九宫格)

 
阅读更多

     相信很多人都喜欢iphone 酷炫的界面,虽然android的原生控件已经足够漂亮,但是往往不能满足用户越来越挑剔的眼光。其实,我们完全可以自己来绘制界面。今天我就来分享下做一个和iphone一样的tab界面。下面先来看下iphone上的效果

 

Android九宫格

 

主界面的布局:

<?xml version="1.0" encoding="utf-8"?> 
<!--主界面的布局--> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"     
    android:orientation="vertical"     
    android:layout_width="fill_parent"     
    android:layout_height="fill_parent" 
    > 
        <RelativeLayout   
            android:id="@+id/MainActivityrlTwo" 
			android:layout_width="fill_parent" 
			android:layout_height="40dp" >
        </RelativeLayout> 
        <GridView  android:id="@+id/gridview"   
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content"   
            android:numColumns="3"  
            android:columnWidth="50dp"   
            android:layout_below="@+id/MainActivityrlTwo" 
			android:layout_marginTop="5dp"  /> 
		<RelativeLayout     android:id="@+id/MainActivityrlThree"      
		    android:layout_width="fill_parent"     android:layout_height="60dp"      
		    android:layout_alignParentBottom="true"      >     
		    <TextView     android:id="@+id/tvLineBottom"      
		        android:layout_width="fill_parent"      
		        android:layout_height="wrap_content"     
		             />       
</RelativeLayout>       
</RelativeLayout> 

 

单元格布局:

<?xml version="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/MainActivityImage"  
	    android:layout_width="50dp" 
	     android:layout_height="50dp"   
	     android:layout_gravity="center_horizontal"   />  
     <TextView  
         android:id="@+id/MainActivityText"   
         android:layout_width="wrap_content"   
         android:layout_height="wrap_content"   
         android:layout_gravity="center_horizontal"   
         android:textSize="18sp" 
       	 android:lines="1"   
       	 android:layout_marginTop="8dp"   /> 
</LinearLayout> 

 

适配器:

package com.easyway.ninebox;

import com.easyway.ninebox.R;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
/**
 * 
 *  前段时间研究了下android中九宫格布局的实现。
 *  纵观现在的应用程序,九宫格是非常常见的一种布局方式。
 *  很多优秀的手机应用程序都采用了这一布局
 * @Title: 
 * @Description: 实现TODO
 * @Copyright:Copyright (c) 2011
 * @Company:易程科技股份有限公司
 * @Date:2012-7-14
 * @author  longgangbai
 * @version 1.0
 */
public class ImageAdapter extends BaseAdapter {  
		private Context context;  
		public ImageAdapter(Context context) {   
			this.context=context;   
		}  
		private Integer[] images = {   //九宫格图片的设置  
				R.drawable.railway,   
				R.drawable.railway,    
				R.drawable.railway,    
				R.drawable.railway,  
				R.drawable.railway,    
				R.drawable.railway,    
				R.drawable.railway,    
				R.drawable.railway,  
				R.drawable.railway   };   
		private String[] texts = {    
				//九宫格图片下方文字的设置  
				"记录支出",    
				"记录收入",     
				"账本管理",    
				"类别管理",     
				"查看图表",  
				"收支对照",   
				"记录心得",    
				"新闻公告",     
				"系统设置",     
		};  
		
		//get the number  
		 @Override  
		 public int getCount() {    
			 return images.length;  
		 }  
		 @Override  
		 public Object getItem(int position) {    
			 return position;   
		 }   
		 //get the current selector's id number  
		 @Override   
		 public long getItemId(int position) {    
			 return position;   
		 }  
		 //create view method 
		 @Override  
		 public View getView(int position, View view, ViewGroup viewgroup) {  
			ImgTextWrapper wrapper;
			if(view==null) {   
			     wrapper = new ImgTextWrapper(); 
				 LayoutInflater inflater = LayoutInflater.from(context);  
				 view = inflater.inflate(R.layout.grid_item, null);    view.setTag(wrapper); 
				 view.setPadding(15, 15, 15, 15);  //每格的间距  
			 } else {   
				 wrapper = (ImgTextWrapper)view.getTag();  
			 } 
			 wrapper.imageView = (ImageView)view.findViewById(R.id.MainActivityImage); 
			 wrapper.imageView.setBackgroundResource(images[position]);  
			 wrapper.textView = (TextView)view.findViewById(R.id.MainActivityText); 
			 wrapper.textView.setText(texts[position]);    
			 return view;   
		}  
		class ImgTextWrapper {  
			ImageView imageView;   
			TextView textView; 
		}  
}

 主页面:

package com.easyway.ninebox;

import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;
/**
 * 九宫格的实现
 * 
 * @Title: 
 * @Description: 实现TODO
 * @Copyright:Copyright (c) 2011
 * @Company:易程科技股份有限公司
 * @Date:2012-7-14
 * @author  longgangbai
 * @version 1.0
 */
public class NineBoxActivity extends Activity {
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
	      super.onCreate(savedInstanceState);
	      setContentView(R.layout.main);
	      //实例化一个适配器
	      ImageAdapter adapter = new ImageAdapter(this);
	      //获得GridView实例
	      GridView gridview = (GridView)findViewById(R.id.gridview);
	      //gridview.setNumColumns(3);//可以在xml中设置
	      //gridview.setGravity(Gravity.CENTER);//同上
	     //将GridView和数据适配器关联
	      gridview.setAdapter(adapter);
    }
}
 

 

 

 

 

 

分享到:
评论

相关推荐

    APP开发教程 Java Android移动端开发 4、Android UI进阶编程 (1) 共34页.pptx

    Android UI进阶编程主要涉及了Drawable的使用以及2D图形绘制的相关概念,这些是构建Android应用界面的关键元素。首先,我们来深入理解Android Drawable。 Android Drawable是一个抽象的概念,它涵盖了各种图形对象...

    Android-仿微博QQ空间论坛九宫格图文混排发表说说动态帖子

    以上就是实现“Android-仿微博QQ空间论坛九宫格图文混排发表说说动态帖子”的核心知识点。这个项目将涉及Android UI设计、数据绑定、图片处理、网络通信等多个方面,是Android开发中的一个综合实践。通过这个项目,...

    Android 九宫格解锁demo

    在Android开发中,九宫格解锁是一种常见的用户交互方式,尤其在早期的手机安全系统或者应用启动时较为流行。这个“Android九宫格解锁demo”是针对微众银行的解锁界面进行的一种模仿实现,旨在帮助开发者理解如何创建...

    Android自定义九宫格抽奖控件

    "Android自定义九宫格抽奖控件"就是一个很好的实例,它解决了在实际业务中对抽奖界面的特殊需求,允许开发者灵活控制抽奖转盘的旋转次数、速度以及最终停留的位置。这种控件不仅能够提供更丰富的交互体验,还能适应...

    Android九宫格源码

    在Android开发中,九宫格布局常常用于创建如应用快捷方式、设置菜单等场景,它是一种常见的用户界面设计。这个“Android九宫格源码”是使用Eclipse IDE编写的,包含两个小型的Demo,旨在展示如何实现这样一个交互式...

    Android高手进阶教程

    《Android高手进阶教程》是一本专为已经具备Android基础知识并渴望进一步提升技能的开发者设计的教程。本书深入探讨了Android开发的高级概念和技术,旨在帮助读者从技术层面跨越到专家水平。 首先,我们来了解一下...

    《Android高级进阶》

    《Android高级进阶》这本书是为那些已经掌握了Android基础,并希望深入学习和提升技能的开发者准备的。在Android开发的世界中,"进阶"通常意味着更复杂的技术、更高效的编程实践以及更深层次的理解。以下是对这本书...

    Android应用源码仿支付宝九宫格解锁.zip

    这篇文档将深入解析《Android应用源码仿支付宝九宫格解锁》的相关知识点,该资源包含了一个实现类似支付宝九宫格解锁功能的Android应用源码,以及相关的图片和说明文件。 首先,九宫格解锁是一种常见于移动设备的...

    Android高手进阶指南

    《Android高手进阶指南》是一本专为已经具备一定Android基础的开发者准备的深度学习资料。这本书涵盖了Android开发中的高级主题和技术,旨在帮助读者提升在Android领域的专业技能,成为真正的技术专家。 首先,本书...

    Android-微博微信九宫格图片布局配上目前可能是Android最好的大图浏览效果

    综上所述,实现“微博微信九宫格图片布局配上目前可能是Android最好的大图浏览效果”涉及到了Android UI设计、图片加载与处理、手势交互、性能优化等多个方面,开发者需要熟练掌握并灵活运用这些技术,才能创建出...

    android仿iphone滚轮UI效果

    在Android平台上实现类似iPhone的滚轮UI效果,是一种常见的需求,尤其在开发跨平台应用时。这个项目提供了源码实现,使得开发者可以深入理解并自定义这种交互方式。滚轮UI,通常被称为“Picker”,是iOS系统中的一个...

    代码写布局-九宫格

    总的来说,无论是Android还是iOS,实现九宫格布局的关键在于理解布局管理系统(如RecyclerView或UICollectionView)的工作原理,并有效地利用它们来创建和管理视图。通过这种方式,我们可以创建出响应式、可扩展的...

    Android开发进阶从小工到专家(pdf书签版)

    《Android开发进阶从小工到专家》是一本专为Android开发者设计的进阶教程,旨在帮助初学者和有一定基础的开发者提升技能,成为一名精通Android开发的专家。这本书涵盖了Android开发的各个方面,包括基础概念、核心...

    Android-仿微信朋友圈展示图片的九宫格图片展示控件支持点击图片全屏预览大图

    这个特定的项目——"Android-仿微信朋友圈展示图片的九宫格图片展示控件支持点击图片全屏预览大图",提供了一个高效的解决方案。下面将详细探讨其关键知识点。 1. **九宫格布局**:九宫格布局是一种常见的UI设计...

    Android应用源码仿微米全部UI项目多种效果值得借鉴

    本项目是一个高仿微米UI的项目,虽然是个UI项目但是很多东西还是值得学习和借鉴的,例如里面漂亮的仿IOS开关、仿QQ的圆角退出登录按钮 、字母索引、图文混编、九宫格图片多选、二维码扫描、仿微信的附近的人列表、仿...

    高清版 Android高级进阶-顾浩鑫-高清版本-带目录

    由于提供的文件信息中,标题、描述和标签均相同,且部分内容仅有重复的“霏霏”二字,无法提供具体的Android高级进阶知识点。为了满足您的要求,我将基于Android高级进阶这一主题,提供一些该领域的通用知识点,希望...

    安卓动画效果相关-炫酷九宫格抽奖demo.rar

    总的来说,这个炫酷九宫格抽奖demo涵盖了Android动画、布局管理、事件监听等多个方面的知识点,对于想要学习Android高级UI特效和动画的开发者来说,是一个非常有价值的参考资料。通过深入研究和实践,开发者可以掌握...

    KLSD.rar_KLSD_android_android 九宫格_九宫格_九宫格26984

    这个名为"KLSD.rar"的压缩包包含了一个针对Android平台的九宫格控件实现,具有换题、提示等功能,并且还加入了动画效果,使得交互体验更为生动。 首先,我们要理解九宫格的基本概念。九宫格是由3x3个小格子组成的一...

    Android 九宫格UI布局的实现方法.rar

    一个初级的Android 九宫格UI布局的实现,演示了实现方法,并附带了例子的源代码。主要是向大家演示九宫格的实现过程和方法,将对应map的Key 、对应R的Id添加Item到网格中,面向android开发者新手,源码仅供参考。

    Android学习进阶精品资料大全.rar

    **Android学习进阶知识点详解** 在移动开发领域,Android占据着重要的地位,是开发者们热衷于探索的技术平台。这份“Android学习进阶精品资料大全”涵盖了从基础到高级的各种资源,适合Android新手和有经验的开发者...

Global site tag (gtag.js) - Google Analytics