Android實現(xiàn)透明指示層

以下僅為自己工作記錄，方便今后查閱

第一步：從原理上，了解這個功能，我們使用RelativeLayout 布局，然后在主頁面內(nèi)容之后，直接加入指示層如下代碼。

<RelativeLayout android:orientation="vertical"android:background="#ffe4e4e4" android:layout_width="fill_parent"android:layout_height="fill_parent"

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

  <LinearLayout android:orientation="vertical"android:background="#ffe4e4e4" android:layout_width="fill_parent"android:layout_height="fill_parent">

    <include layout="@layout/hotel_details_head" />

    <ListView android:id="@id/hotel_detail_rooms"android:fadingEdgeLength="5.0dip" android:layout_width="fill_parent"android:layout_height="wrap_content" android:listSelector="#00000000"android:cacheColorHint="#00000000" android:divider="#00ffffff"android:dividerHeight="1.0dip" />

    </LinearLayout>

    <ImageView   

    android:src="@drawable/tip1"  

    android:layout_height="fill_parent"   

    android:layout_width="fill_parent"  

    android:id="@+id/helpTipbackground"  

    android:scaleType="centerInside"

    android:keepScreenOn="true"  

    android:visibility="gone"

  />

    <ImageView   

    android:src="@drawable/thisred"  

    android:layout_height="wrap_content"   

    android:layout_width="wrap_content"  

    android:id="@+id/helpTip"  

    android:scaleType="center"

    android:visibility="gone"

  />

</RelativeLayout>

解釋：linearlayout是主要顯示的內(nèi)容，而下面的兩個p_w_picpathview是用來指示的圖層。這里我使用指示層和解釋層分開的方式，因為我發(fā)現(xiàn)android不同尺寸的屏幕如果只用一層太不好弄啦，也可以合并到一層根據(jù)個人需求自行決定，如果是一層那就不需要兩個p_w_picpathview了。我們可以先將它們隱藏（ android:visibility="gone"），等到主頁面正常顯示出來在將指示層顯示出來。

第二步：添加activity代碼，實現(xiàn)點擊圖層變化解釋層的圖標(biāo)和指示層的位置。

private ImageView helpTipIV;//手指

private ImageView helpTipBackIV;//手指背景

private int backpicture=0;

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_hotel_detail);

helpTipIV=(ImageView)this.findViewById(R.id.helpTip);

helpTipIV.setOnClickListener(this);

int[]xy = new int[2];

hotel_detail_save_iconIV.getLocationOnScreen(xy);

int x=xy[0];

int y=xy[1];

RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(300,350);

params.setMargins(x-90, y+20, 0, 0);

helpTipIV.setLayoutParams(params);

helpTipBackIV=(ImageView)this.findViewById(R.id.helpTipbackground);

helpTipBackIV.setOnClickListener(this);

hotel_details_locationTV= (LinearLayout)hotelroomheader.findViewById(R.id.hotel_details_location);

}

@Override

public void onClick(View view) {

// TODO Auto-generated method stub

   int i=view.getId();

            switch(view.getId())

{

case R.id.helpTipbackground:{

if(backpicture==0)

{

helpTipBackIV.setImageResource(R.drawable.tip2);

int[]xy = new int[2];

hotel_details_locationTV.getLocationOnScreen(xy);

int x=xy[0];

int y=xy[1];

RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(300,350);

params.setMargins(x, y+20, 0, 0);

helpTipIV.setLayoutParams(params);

backpicture++;

}else

{

helpTipBackIV.setVisibility(View.GONE);

helpTipIV.setVisibility(View.GONE);

}

helpTipBackIV.setImageResource(R.drawable.tip2);

break;

}

}

}

解釋：在初始化界面成功后，先給手指層定義第一個指示的位置，然后給背景層添加點擊事件，這里的onclick（）方法是定義在父類中的，也可以直接為p_w_picpathview控件添加點擊事件。這里要強調(diào)一下，原來我用的給控件定位的方法是setLeft()、setTop()、setRight()、setBottom()。這個方式如果對應(yīng)一個圖層的時候沒有問題，但是對應(yīng)兩層的時候，如果其中一層調(diào)用了setImageResource()方法，另一側(cè)會莫名其妙的變回到初始位置，由于我也是菜鳥不是很了解其中具體的原因，大概可能就是因為setImageResource()方法會重新初始化下另一個p_w_picpathview吧，總之用RelativeLayout.LayoutParams 是比較穩(wěn)妥的方法。

這樣運行之后，界面一開始沒有指示層，直到顯示出需要的界面后，指示層才出現(xiàn)，指示層會在需要解釋的功能按鈕旁邊起到指示的作用，而解釋層則會覆蓋全部界面，當(dāng)點擊覆蓋全部界面的解釋層的時候，指示層改變位置，解釋層更換下一張解釋圖片，OK大功告成。