今天主要做了一个小的Android程序——猜鸡蛋。虽然程序整体来说不难,但有很多细节上的问题需要处理。

      首先是布局,主要采用了表格布局、线性布局以及表格和线性相结合的布局。

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:background="@drawable/background" >    //设置背景图片
    
    <TableLayout
        android:id="@+id/main_table"
        android:layout_width="match_parent"    
        android:layout_height="match_parent">
        <TableRow
            android:id="@+id/main_row_01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"     //使表格中的内容位于中间
            android:layout_weight="1">    //占总布局的1/4。分子数是weight的值,分母数是.xml中所有weight值的和
            <LinearLayout
                android:id="@+id/main_linear_01"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">    //水平排列
                
                <TextView
                    android:id="@+id/main_text_msg"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/main_tv_word" 
                    android:textSize="30px"
                    android:textColor="#000000"    //设置字体颜色
                    android:gravity="center"/>    //使表格中的内容位于中间

                
                </LinearLayout>
            
            
            </TableRow>
            
        <TableRow
            android:id="@+id/main_row_02"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="2"
            android:paddingTop="40px">    //距离顶部40像素
            <LinearLayout
                android:id="@+id/main_linear_02"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >
                
                <ImageView                                        //设置图片操作
                    android:id="@+id/main_image_01"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/shoe_default"
                    android:maxWidth="260px"          //设置图片的宽度
                    android:maxHeight="260px"         //设置图片的高度
                    android:adjustViewBounds="true"/>        //使图片能够自动改变大小
                
                  <ImageView
                    android:id="@+id/main_image_02"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/shoe_default"
                    android:maxWidth="260px"
                    android:maxHeight="260px"
                    android:adjustViewBounds="true"/>
                  
                    <ImageView
                    android:id="@+id/main_image_03"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/shoe_default"
                    android:maxWidth="260px"
                    android:maxHeight="260px"     
                    android:adjustViewBounds="true"/>
                    
                </LinearLayout>
           </TableRow>
          <TableRow                               //表格布局中嵌套线性布局
            android:id="@+id/main_row_01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="1">
            <LinearLayout
                android:id="@+id/main_linear_02"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center"
                >
                <Button
                    android:id="@+id/main_btn_reset"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/main_btn_reset"/>

                </LinearLayout>
            </TableRow>
        
        </TableLayout>

</RelativeLayout>



运行效果如下:

Android表 Android表格布局实现猜鸡蛋_android

在显示的时候出现了一个问题,屏幕是竖着的。按Ctrl+F12键可以改变屏幕的方向。


页面做好之后是后台的java代码:

(1)首先要做的是对各个控件进行初始化。

先对控件进行声明。

private TextView textmsg;
private ImageView[] imageViews=new ImageView[3];
private Button btnReset;
private int[] images={
			R.drawable .shoe_ok,R.drawable .shoe_sorry,R.drawable .shoe_sorry
		};



在初始化的过程中用到了一个小技巧。通过泛型<T>T,可以减少很多重复的操作,使代码更加简洁。

private <T>T getViewById(int id)
{
	View view=findViewById(id);
	return (T) view;
}

初始化操作如下:


private void findView() 
{
	textmsg=(TextView) findViewById(R.id.main_text_msg);
	imageViews[0]=getViewById(R.id.main_image_01);
	imageViews[1]=getViewById(R.id.main_image_02);
	imageViews[2]=getViewById(R.id.main_image_03);
	btnReset=getViewById(R.id .main_btn_reset);
}


(2)这是本次程序编写过程中的核心代码

在图片数组的遍历的过程中产生1-3的随机数。在进行交换,打乱原来的顺讯。

private void initImages()
 {
    for(int i=0;i<images.length ;i++)
    {
    	int index=(int)(Math.random()*images.length);
    	int temp=images[index];
    	images[index]=images[i];
    	images[i]=temp;
    }
 }


(3)设置监听器操作

在设置监听器之前需要进行一个重要的操作。检验游戏进行的次数,确保游戏一次只能玩一次。只有在点击“再玩一次”按钮后才能在玩一次,保证游戏的合理性。同时,检验代码还可以判断玩家是否猜中?。,并针对不同的情况给出不同的信息。

检验的代码如下:

private void isCheck(int index)
{
	//是否点击过图片
	if(flag)
		return;
	initImages();
	//给imageView控件赋值
	for(int i=0;i<images.length ;i++)
	{
		imageViews[i].setImageResource(images[i]);
		imageViews[i].setImageAlpha(150);
	}
	//设当前下标对应的图片不透明
	imageViews[index].setImageAlpha(255);
	//判断是否猜中
	if(images[index]==R.drawable .shoe_ok)
	{
		textmsg.setText("恭喜你,猜对了!");
	}
	else
	{
		textmsg.setText("不要灰心,再来一次");
	}
	flag=true;
}



之后是图片监听器的设置操作:

imageViews[0].setOnClickListener(new OnClickListener()
{

	@Override
	public void onClick(View v) 
	{
		isCheck(0);
	}
});
		
imageViews[1].setOnClickListener(new OnClickListener()
{

	@Override
	public void onClick(View v) 
	{
		isCheck(1);
	}
});
		
imageViews[2].setOnClickListener(new OnClickListener()
{

	@Override
	public void onClick(View v) 
	{
		isCheck(2);
	}
});


最后是给“再玩一次”按钮设置监听操作。

这一步主要是恢复各个图片的原样。首先是对鞋子进行重新排列,在将访问标志flag设为false。

btnReset.setOnClickListener(new OnClickListener()
{

	@Override
	public void onClick(View v) 
	{
		initImages();
		textmsg.setText(R.string .main_tv_word);
		for(ImageView iv:imageViews)
		{
			iv.setImageResource(R.drawable .shoe_default);
			iv.setImageAlpha(255);
		}
		flag=false;
	}
});



(4)操作过程:

    4.1、猜错的情况:

    

Android表 Android表格布局实现猜鸡蛋_android_02

    

    4.1、再玩一次的情况:

Android表 Android表格布局实现猜鸡蛋_ide_03

   


    4.3、猜对的情况:

    

Android表 Android表格布局实现猜鸡蛋_xml_04


附:

    android图标的显示方法:

    相信很多初学Android的朋友都会疑惑一个问题,如何才能在手机上显示自己的Android程序的图标。这个过程其实很简单。打开AndroidManifest.xml文件,在Application标签里找到android:icon选项。将其属性改为自己喜欢的图片的位置。

例:

<application
         android:icon="@drawable/shoe_default"



运行效果如图所示:

Android表 Android表格布局实现猜鸡蛋_ide_05