Android实现透明指示层

2024-11-23 技术教程

以下仅为自己工作记录，方便今后查阅

第一步：从原理上，了解这个功能，我们使用RelativeLayout布局，然后在主页面内容之后，直接加入指示层如下代码。

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

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

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

<includelayout="@layout/hotel_details_head"/>

<ListViewandroid: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是主要显示的内容，而下面的两个p_w_picpathview是用来指示的图层。这里我使用指示层和解释层分开的方式，因为我发现android不同尺寸的屏幕如果只用一层太不好弄啦，也可以合并到一层根据个人需求自行决定，如果是一层那就不需要两个p_w_picpathview了。我们可以先将它们隐藏（android:visibility="gone"），等到主页面正常显示出来在将指示层显示出来。

第二步：添加activity代码，实现点击图层变化解释层的图标和指示层的位置。

privateImageViewhelpTipIV;//手指

privateImageViewhelpTipBackIV;//手指背景

privateintbackpicture=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 =newint[2];

hotel_detail_save_iconIV.getLocationOnScreen(xy);

intx=xy[0];

inty=xy[1];

RelativeLayout.LayoutParamsparams =newRelativeLayout.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())

{

caseR.id.helpTipbackground:{

if(backpicture==0)

{

helpTipBackIV.setImageResource(R.drawable.tip2);

int[]xy =newint[2];

hotel_details_locationTV.getLocationOnScreen(xy);

intx=xy[0];

inty=xy[1];

RelativeLayout.LayoutParamsparams =newRelativeLayout.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控件添加点击事件。这里要强调一下，原来我用的给控件定位的方法是setLeft()、setTop()、setRight()、setBottom()。这个方式如果对应一个图层的时候没有问题，但是对应两层的时候，如果其中一层调用了setImageResource()方法，另一侧会莫名其妙的变回到初始位置，由于我也是菜鸟不是很了解其中具体的原因，大概可能就是因为setImageResource()方法会重新初始化下另一个p_w_picpathview吧，总之用RelativeLayout.LayoutParams是比较稳妥的方法。

这样运行之后，界面一开始没有指示层，直到显示出需要的界面后，指示层才出现，指示层会在需要解释的功能按钮旁边起到指示的作用，而解释层则会覆盖全部界面，当点击覆盖全部界面的解释层的时候，指示层改变位置，解释层更换下一张解释图片，OK大功告成。